Job category group, Job Aggregator / Board UI
Get a free card groups for your job portal/aggregator/board website. It is made using HTML/CSS and Tailwind CSS. In addition to this resource, we have many more available on our website. Get the code you need to create stunning landing pages with our free code blocks/components made in Tailwind CSS.
Technology Used:
Tailwindcss v3
<section class="mt-8 bg-gray-700 md:mt-12">
<div class="mx-auto max-w-screen-xl px-4 py-12">
<div class="text-center md:text-left">
<h3 class="text-3xl font-black text-gray-50">Browse by category</h3>
<p class="mt-2 text-sm font-medium text-gray-300">Find the job that’s perfect for you. about 800+ new jobs everyday</p>
</div>
<div class="mt-8 grid grid-cols-12 gap-y-8 sm:gap-8">
<div class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3">
<a class="block cursor-pointer bg-gray-900 p-4 transition-all duration-300 hover:rotate-1">
<div class="flex items-center gap-x-2">
<img alt="icon" class="aspect-[2/2] h-16 w-16" src="https://img.icons8.com/fluency/48/null/marketing.png" />
<div>
<h3 class="text-xl font-bold text-gray-50">Marketing & Sale</h3>
<p class="text-sm text-gray-300">1,526 Jobs Available</p>
</div>
</div>
</a>
</div>
<div class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3">
<a class="block cursor-pointer bg-gray-900 p-4 transition-all duration-300 hover:rotate-1">
<div class="flex items-center gap-x-2">
<img alt="icon" class="aspect-[2/2] h-16 w-16" src="https://img.icons8.com/fluency/48/null/headset.png" />
<div>
<h3 class="text-xl font-bold text-gray-50">Customer Help</h3>
<p class="text-sm text-gray-300">185 Jobs Available</p>
</div>
</div>
</a>
</div>
<div class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3">
<a class="block cursor-pointer bg-gray-900 p-4 transition-all duration-300 hover:rotate-1">
<div class="flex items-center gap-x-2">
<img alt="icon" class="aspect-[2/2] h-16 w-16" src="https://img.icons8.com/fluency/48/null/add-dollar.png" />
<div>
<h3 class="text-xl font-bold text-gray-50">Finance</h3>
<p class="text-sm text-gray-300">120 Jobs Available</p>
</div>
</div>
</a>
</div>
<div class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3">
<a class="block cursor-pointer bg-gray-900 p-4 transition-all duration-300 hover:rotate-1">
<div class="flex items-center gap-x-2">
<img alt="icon" class="aspect-[2/2] h-16 w-16" src="https://img.icons8.com/fluency/48/null/programming.png" />
<div>
<h3 class="text-xl font-bold text-gray-50">Software</h3>
<p class="text-sm text-gray-300">1,856 Jobs Available</p>
</div>
</div>
</a>
</div>
<div class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3">
<a class="block cursor-pointer bg-gray-900 p-4 transition-all duration-300 hover:rotate-1">
<div class="flex items-center gap-x-2">
<img alt="icon" class="aspect-[2/2] h-16 w-16" src="https://img.icons8.com/fluency/48/null/human-resources.png" />
<div>
<h3 class="text-xl font-bold text-gray-50">Human Resource</h3>
<p class="text-sm text-gray-300">165 Jobs Available</p>
</div>
</div>
</a>
</div>
<div class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3">
<a class="block cursor-pointer bg-gray-900 p-4 transition-all duration-300 hover:rotate-1">
<div class="flex items-center gap-x-2">
<img alt="icon" class="aspect-[2/2] h-16 w-16" src="https://img.icons8.com/fluency/48/null/commercial-development-management.png" />
<div>
<h3 class="text-xl font-bold text-gray-50">Management</h3>
<p class="text-sm text-gray-300">965 Jobs Available</p>
</div>
</div>
</a>
</div>
<div class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3">
<a class="block cursor-pointer bg-gray-900 p-4 transition-all duration-300 hover:rotate-1">
<div class="flex items-center gap-x-2">
<img alt="icon" class="aspect-[2/2] h-16 w-16" src="https://img.icons8.com/fluency/48/null/mobile-shopping-bag.png" />
<div>
<h3 class="text-xl font-bold text-gray-50">Retail & Products</h3>
<p class="text-sm text-gray-300">563 Jobs Available</p>
</div>
</div>
</a>
</div>
<div class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3">
<a class="block cursor-pointer bg-gray-900 p-4 transition-all duration-300 hover:rotate-1">
<div class="flex items-center gap-x-2">
<img alt="icon" class="aspect-[2/2] h-16 w-16" src="https://img.icons8.com/fluency/48/null/fingerprint-recognition.png" />
<div>
<h3 class="text-xl font-bold text-gray-50">Security Analyst</h3>
<p class="text-sm text-gray-300">254 Jobs Available</p>
</div>
</div>
</a>
</div>
<div class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3">
<a class="block cursor-pointer bg-gray-900 p-4 transition-all duration-300 hover:rotate-1">
<div class="flex items-center gap-x-2">
<img alt="icon" class="aspect-[2/2] h-16 w-16" src="https://img.icons8.com/fluency/48/null/typewriter-with-paper.png" />
<div>
<h3 class="text-xl font-bold text-gray-50">Content Writer</h3>
<p class="text-sm text-gray-300">142 Jobs Available</p>
</div>
</div>
</a>
</div>
<div class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3">
<a class="block cursor-pointer bg-gray-900 p-4 transition-all duration-300 hover:rotate-1">
<div class="flex items-center gap-x-2">
<img alt="icon" class="aspect-[2/2] h-16 w-16" src="https://img.icons8.com/fluency/48/null/edit-graph-report.png" />
<div>
<h3 class="text-xl font-bold text-gray-50">Market Research</h3>
<p class="text-sm text-gray-300">532 Jobs Available</p>
</div>
</div>
</a>
</div>
<div class="col-span-12 text-center">
<button class="bg-blue-600 px-5 py-3 text-sm font-medium text-gray-50 hover:bg-blue-600/80">Explore all category</button>
</div>
</div>
</div>
</section>
