<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">•</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">•</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">•</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">•</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">•</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">•</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>Framework
Tailwind CSS
UI Library
All Libraries
Components
- Alert 101
- Application 108
- Banners 73
- Benefits 16
- Blog 132
- Breadcrumbs 24
- Call to action 199
- Cards 29
- Careers 32
- Confirmation 6
- Contact 106
- Content 85
- Cookies 97
- Dashboards 13
- Download 5
- E-commerce (orders) 35
- E-commerce (products) 76
- FAQ 95
- Features 227
- Footers 145
- Forms 9
- Graphs 38
- HTTP codes 107
- Hero section 164
- How it works 129
- Instagram photos 5
- Integrations 5
- Logo clouds 179
- Modals 29
- Navbar 209
- Navigation (horizontal) 215
- Navigation (vertical) 7
- Newsletter 129
- Notifications 7
- Paginations 12
- Portfolio 93
- Pricing 128
- Product info 5
- Projects 6
- Reviews 32
- Rich text 3
- Sign in / Sign up 181
- Snackbars 10
- Stats 153
- Tables 75
- Team 117
- Testimonials 144
- Users 17
Component #1
Component #2
Component #3
Component #4
Component #5
Component #6
Component #7
Component #8
Component #9
Component #10
Careers Components by Shuffle
Choose from 32 variations of Tailwind application components. Presented here are variants available in various UI libraries.
Get access to all Tailwind application components, code and our visual editor. Try the demo for free!
