Tailwind Careers Components

<section class="py-24 bg-blueGray-50 overflow-hidden">
  <div class="container px-4 mx-auto">
    <h2 class="mb-5 text-6xl md:text-8xl xl:text-10xl text-center font-bold font-heading font-heading tracking-px-n leading-none">Featured Jobs</h2>
    <p class="mb-16 text-lg text-gray-600 text-center font-medium leading-normal md:max-w-lg mx-auto">Lorem ipsum dolor sit amet, to the con adipiscing. Volutpat tempor to the condimentum vitae vel purus.</p>
    <div class="md:max-w-6xl mx-auto">
      <div class="flex flex-wrap -m-3.5 mb-10">
        <div class="w-full md:w-1/3 p-3.5">
          <a href="#">
            <div class="relative p-6 h-full bg-white border hover:border-gray-300 rounded-xl">
              <img class="absolute left-0 top-0" src="flaro-assets/images/career/gradient.svg" alt="">
              <div class="relative z-10 flex flex-col justify-between h-full">
                <div class="mb-24 flex-1">
                  <h3 class="mb-2 text-lg font-bold font-heading leading-snug">Senior UX Designer</h3>
                  <p class="text-sm text-gray-500 font-medium">
                    <span>Contract</span>
                    <span class="px-2">&bull;</span>
                    <span>New York, USA</span>
                  </p>
                </div>
                <div class="flex-1">
                  <img src="flaro-assets/logos/brands/brand-medium.png" alt="">
                </div>
              </div>
            </div>
          </a>
        </div>
        <div class="w-full md:w-1/3 p-3.5">
          <a href="#">
            <div class="relative p-6 h-full bg-white border hover:border-gray-300 rounded-xl">
              <img class="absolute left-0 top-0" src="flaro-assets/images/career/gradient.svg" alt="">
              <div class="relative z-10 flex flex-col justify-between h-full">
                <div class="mb-24 flex-1">
                  <h3 class="mb-2 text-lg font-bold font-heading leading-snug">Digital Marketer</h3>
                  <p class="text-sm text-gray-500 font-medium">
                    <span>Full Time</span>
                    <span class="px-2">&bull;</span>
                    <span>New York, USA</span>
                  </p>
                </div>
                <div class="flex-1">
                  <img src="flaro-assets/logos/brands/brand-medium2.png" alt="">
                </div>
              </div>
            </div>
          </a>
        </div>
        <div class="w-full md:w-1/3 p-3.5">
          <a href="#">
            <div class="relative p-6 h-full bg-white border hover:border-gray-300 rounded-xl">
              <img class="absolute left-0 top-0" src="flaro-assets/images/career/gradient.svg" alt="">
              <div class="relative z-10 flex flex-col justify-between h-full">
                <div class="mb-24 flex-1">
                  <h3 class="mb-2 text-lg font-bold font-heading leading-snug">Junior JS Developer</h3>
                  <p class="text-sm text-gray-500 font-medium">
                    <span>Full Time</span>
                    <span class="px-2">&bull;</span>
                    <span>Remote</span>
                  </p>
                </div>
                <div class="flex-1">
                  <img src="flaro-assets/logos/brands/brand-medium3.png" alt="">
                </div>
              </div>
            </div>
          </a>
        </div>
        <div class="w-full md:w-1/3 p-3.5">
          <a href="#">
            <div class="relative p-6 h-full bg-white border hover:border-gray-300 rounded-xl">
              <img class="absolute left-0 top-0" src="flaro-assets/images/career/gradient.svg" alt="">
              <div class="relative z-10 flex flex-col justify-between h-full">
                <div class="mb-24 flex-1">
                  <h3 class="mb-2 text-lg font-bold font-heading leading-snug">Senior Software Developer</h3>
                  <p class="text-sm text-gray-500 font-medium">
                    <span>Full Time</span>
                    <span class="px-2">&bull;</span>
                    <span>New York, USA</span>
                  </p>
                </div>
                <div class="flex-1">
                  <img src="flaro-assets/logos/brands/brand-medium4.png" alt="">
                </div>
              </div>
            </div>
          </a>
        </div>
        <div class="w-full md:w-1/3 p-3.5">
          <a href="#">
            <div class="relative p-6 h-full bg-white border hover:border-gray-300 rounded-xl shadow-9xl">
              <img class="absolute left-0 top-0" src="flaro-assets/images/career/gradient.svg" alt="">
              <div class="relative z-10 flex flex-col justify-between h-full">
                <div class="mb-24 flex-1">
                  <h3 class="mb-2 text-lg font-bold font-heading leading-snug">Product Designer</h3>
                  <p class="text-sm text-gray-500 font-medium">
                    <span>Full Time</span>
                    <span class="px-2">&bull;</span>
                    <span>Remote</span>
                  </p>
                </div>
                <div class="flex-1">
                  <img src="flaro-assets/logos/brands/brand-medium5.png" alt="">
                </div>
              </div>
            </div>
          </a>
        </div>
        <div class="w-full md:w-1/3 p-3.5">
          <a href="#">
            <div class="relative p-6 h-full bg-white border hover:border-gray-300 rounded-xl">
              <img class="absolute left-0 top-0" src="flaro-assets/images/career/gradient.svg" alt="">
              <div class="relative z-10 flex flex-col justify-between h-full">
                <div class="mb-24 flex-1">
                  <h3 class="mb-2 text-lg font-bold font-heading leading-snug">Full-Stack Developer</h3>
                  <p class="text-sm text-gray-500 font-medium">
                    <span>Full Time</span>
                    <span class="px-2">&bull;</span>
                    <span>Texas, USA</span>
                  </p>
                </div>
                <div class="flex-1">
                  <img src="flaro-assets/logos/brands/brand-medium6.png" alt="">
                </div>
              </div>
            </div>
          </a>
        </div>
      </div>
      <a class="flex justify-center items-center text-center font-semibold text-indigo-600 hover:text-indigo-700 leading-normal" href="#">
        <span class="mr-2.5">See all 8,849 jobs</span>
        <svg width="17" height="16" viewbox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.83333 3.33337L14.5 8.00004M14.5 8.00004L9.83333 12.6667M14.5 8.00004L2.5 8.00004" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </a>
    </div>
  </div>
</section>