Job Board Landing Page
Get a free hero sections for your 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
AlpineJs v3
<!-- AlpineJS -->
<script src="//unpkg.com/alpinejs" defer></script>
<!-- ******** -->
<!-- NAVBAR SECTION -->
<nav x-data class="bg-gray-900">
<div class="mx-auto max-w-screen-xl px-4">
<ul class="flex items-center justify-between py-4">
<li>
<ul class="flex items-center gap-x-4">
<li>
<a class="text-gray-50 hover:opacity-80">
<div>
<span class="text-xl font-bold">Gorkha</span>
<span class="text-xl font-bold text-yellow-600">Job</span>
</div>
</a>
</li>
<li class="hidden md:block">
<a class="cursor-pointer text-sm font-medium text-gray-50 hover:text-gray-50/80">Find a Job</a>
</li>
<li class="hidden md:block">
<a class="cursor-pointer text-sm font-medium text-gray-50 hover:text-gray-50/80">About</a>
</li>
<li class="hidden md:block">
<a class="cursor-pointer text-sm font-medium text-gray-50 hover:text-gray-50/80">Make a Resume</a>
</li>
</ul>
</li>
<li>
<ul class="flex items-center gap-x-4">
<li>
<button class="cursor-pointer bg-transparent px-4 py-2 text-sm font-medium text-gray-50 hover:text-gray-50/80">
<a>Sign In</a>
</button>
</li>
<li class="hidden md:block">
<button class="cursor-pointer bg-yellow-600 px-4 py-2 text-sm font-medium text-gray-50 text-gray-50 hover:text-gray-50/80">
<a>Sign up</a>
</button>
</li>
<li class="md:hidden">
<button
x-on:click="
document.querySelector('#sidenavbar').classList.remove('w-0');
document.querySelector('#sidenavbar').classList.add('w-full');
"
aria-label="menu button"
class="cursor-pointer bg-yellow-600 px-2 py-2 text-sm font-medium text-gray-50 text-gray-50 hover:text-gray-50/80"
>
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="h-6 w-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</button>
</li>
</ul>
</li>
</ul>
</div>
<!--👇 Side navbar 👇-->
<div id="sidenavbar" class="duration-400 fixed top-0 right-0 z-50 h-full w-0 overflow-x-hidden transition-all">
<div
x-on:click="
document.querySelector('#sidenavbar').classList.add('w-0');
document.querySelector('#sidenavbar').classList.remove('w-full');
"
class="absolute right-0 top-0 z-50 h-full w-full backdrop-blur-lg"
></div>
<div class="absolute right-0 top-0 z-50 h-full w-[300px] border-l bg-white shadow-lg">
<div class="flex items-center justify-between border-b p-4">
<a class="cursor-pointer">
<div>
<span class="text-xl font-bold">Gorkha</span>
<span class="text-xl font-bold text-yellow-600">Job</span>
</div>
</a>
<button
aria-label="close"
x-on:click="
document.querySelector('#sidenavbar').classList.add('w-0');
document.querySelector('#sidenavbar').classList.remove('w-full');
"
class="text-gray-900 hover:text-gray-900/70"
>
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</button>
</div>
<div class="border-b p-4">
<ul class="flex flex-col gap-y-3">
<li>
<a class="cursor-pointer text-sm font-medium text-gray-900 hover:text-gray-900/70">Find a Job</a>
</li>
<li>
<a class="cursor-pointer text-sm font-medium text-gray-900 hover:text-gray-900/70">About</a>
</li>
<li>
<a class="cursor-pointer text-sm font-medium text-gray-900 hover:text-gray-900/70">Contact</a>
</li>
</ul>
</div>
<div class="p-4">
<a class="flex cursor-pointer items-center justify-center gap-x-2 rounded-lg bg-gray-900 px-3 py-2 text-sm font-medium text-gray-50 hover:bg-gray-900/70">
<span>Make A Resume</span>
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-4 w-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
</svg>
</a>
</div>
</div>
</div>
<!--👆 *********** 👆-->
</nav>
<!-- ************** -->
<main class="bg-gray-700">
<!-- HERO SECTION -->
<header class="relative bg-gradient-to-b from-gray-900 to-zinc-900">
<div class="mx-auto max-w-screen-md px-4 py-16 text-center sm:py-20 md:pt-20 md:pb-24">
<h1 class="text-4xl font-black text-gray-50">Explore a wide range of job opportunities with us.</h1>
<p class="text-gray-80 my-6 text-sm text-gray-300">Our platform is designed to make it easy for you to search for job openings from a wide range of sources, including job boards, company websites, and more. With our extensive selection of job listings and user-friendly interface, you can streamline your job search and find your perfect career match.</p>
<div>
<button class="bg-yellow-600 px-6 py-3 text-base font-medium text-gray-50 hover:text-gray-50/80">
<a>Find a Job</a>
</button>
<button class="bg-blue-600 px-6 py-3 text-base font-medium text-gray-50 hover:text-gray-50/80">
<a>Create a Resume</a>
</button>
</div>
</div>
<div class="relative left-[50%] z-20 w-full translate-x-[-50%] pb-12 md:absolute md:-bottom-20 md:pb-0">
<div class="mx-auto max-w-screen-md px-4">
<form class="bg-gray-800 p-4">
<div class="flex flex-col items-center gap-3 md:flex-row">
<div class="w-full">
<input class="w-full border-0 p-3 text-sm font-medium outline-0 ring-0" type="text" placeholder="Job title or Company name" />
</div>
<div class="w-full">
<select class="w-full border-0 p-3 text-sm font-medium outline-0 ring-0">
<option value="">Location</option>
<option value="">Kathmandu</option>
</select>
</div>
<div class="w-full">
<select class="w-full border-0 p-3 text-sm font-medium outline-0 ring-0">
<option value="">Category</option>
<option value="">IT Engineering</option>
</select>
</div>
<div class="w-full">
<button class="w-full bg-blue-600 p-3 text-sm font-medium text-gray-50">Search Job</button>
</div>
</div>
<div class="mt-2 text-sm font-medium">
<span class="mx-2 mt-2 inline-block text-gray-50">POPULAR KEYWORDS:</span>
<span class="mx-2 my-2 text-green-500">DESIGNER</span>
<span class="mx-2 mt-2 inline-block text-yellow-500">PHP</span>
<span class="mx-2 mt-2 inline-block text-pink-500">IOS DEVELOPER</span>
<span class="mx-2 my-2 text-red-500">WEB</span>
<span class="mx-2 mt-2 inline-block text-lime-500">WEST LONDON</span>
<span class="mx-2 my-2 text-blue-500">SENIORENGINEER</span>
<span class="mx-2 mt-2 inline-block text-orange-500">LINUX</span>
<span class="mx-2 mt-2 inline-block text-blue-400">IOS</span>
</div>
</form>
</div>
</div>
</header>
<!-- ************ -->
<!-- JOB LISTING -->
<section class="mt-12 md:mt-32">
<div class="mx-auto max-w-screen-xl px-4 py-12">
<div class="flex flex-col items-center justify-between gap-y-5 sm:flex-row">
<h3 class="max-w-sm text-center text-3xl font-black text-gray-50 sm:text-left">We are waiting for you</h3>
<div class="bg-blue-600 p-2">
<button class="rounded bg-gray-50 px-4 py-2 text-sm font-medium">Recent Jobs</button>
<button class="rounded px-4 py-2 text-sm font-medium text-gray-50">Feature Job</button>
</div>
</div>
<div class="mt-8 grid grid-cols-12 gap-y-8 sm:gap-8">
<div class="col-span-12 sm:col-span-6 lg:col-span-4">
<div class="group bg-gray-900 p-4 transition-all duration-300 hover:rotate-1 lg:p-8">
<div class="mb-3 text-right">
<button class="text-gray-50 transition-all duration-300 hover:scale-110 hover:text-red-600">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-6 w-6">
<path d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001a.752.752 0 01-.704 0l-.003-.001z" />
</svg>
</button>
</div>
<div class="flex items-center gap-x-2">
<img class="aspect-[2/2] w-16" src="https://img.icons8.com/fluency/48/null/mac-os.png" />
<div>
<h3 class="text-xl font-bold text-gray-50">Apple</h3>
<span class="text-xs text-gray-300">New location, USA</span>
</div>
</div>
<div class="my-4">
<h3 class="text-2xl font-medium text-gray-200">UI/UX Designer</h3>
<div class="text-sm font-medium">
<span class="m-1 ml-0 inline-block text-blue-500">HTML</span>
<span class="m-1 ml-0 inline-block text-yellow-500">CSS</span>
<span class="m-1 ml-0 inline-block text-pink-500">FIGMA</span>
<span class="m-1 ml-0 inline-block text-lime-500">Ad. XD</span>
<span class="m-1 ml-0 inline-block text-blue-500">Illustrator</span>
</div>
<div class="mt-2 text-sm text-gray-400">$60K - $100K per year</div>
</div>
<div class="flex items-center justify-between">
<span class="text-sm font-medium text-gray-50">Full Time</span>
<a class="font-medium text-blue-500 transition-all duration-300 group-hover:text-blue-500/80">Apply Now</a>
</div>
</div>
</div>
<div class="col-span-12 sm:col-span-6 lg:col-span-4">
<div class="group bg-gray-900 p-4 transition-all duration-300 hover:rotate-1 lg:p-8">
<div class="mb-3 text-right">
<button class="text-gray-50 transition-all duration-300 hover:scale-110 hover:text-red-600">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-6 w-6">
<path d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001a.752.752 0 01-.704 0l-.003-.001z" />
</svg>
</button>
</div>
<div class="flex items-center gap-x-2">
<img class="aspect-[2/2] w-16" src="https://img.icons8.com/fluency/48/null/facebook-new.png" />
<div>
<h3 class="text-xl font-bold text-gray-50">Facebook Meta</h3>
<span class="text-xs text-gray-300">New location, USA</span>
</div>
</div>
<div class="my-4">
<h3 class="text-2xl font-medium text-gray-200">Full stack web developer</h3>
<div class="text-sm font-medium">
<span class="m-1 ml-0 inline-block text-blue-500">HTML</span>
<span class="m-1 ml-0 inline-block text-yellow-500">CSS</span>
<span class="m-1 ml-0 inline-block text-pink-500">TAILWIND CSS</span>
<span class="m-1 ml-0 inline-block text-lime-500">FIGMA</span>
<span class="m-1 ml-0 inline-block text-blue-500">UI/UX</span>
</div>
<div class="mt-2 text-sm text-gray-400">$60K - $100K per year</div>
</div>
<div class="flex items-center justify-between">
<span class="text-sm font-medium text-gray-50">Full Time</span>
<a class="font-medium text-blue-500 transition-all duration-300 group-hover:text-blue-500/80">Apply Now</a>
</div>
</div>
</div>
<div class="col-span-12 sm:col-span-6 lg:col-span-4">
<div class="group bg-gray-900 p-4 transition-all duration-300 hover:rotate-1 lg:p-8">
<div class="mb-3 text-right">
<button class="text-gray-50 transition-all duration-300 hover:scale-110 hover:text-red-600">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-6 w-6">
<path d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001a.752.752 0 01-.704 0l-.003-.001z" />
</svg>
</button>
</div>
<div class="flex items-center gap-x-2">
<img class="aspect-[2/2] w-16" src="https://img.icons8.com/bubbles/50/null/facebook-new.png" />
<div>
<h3 class="text-xl font-bold text-gray-50">Facebook Meta</h3>
<span class="text-xs text-gray-300">New location, USA</span>
</div>
</div>
<div class="my-4">
<h3 class="text-2xl font-medium text-gray-200">Full stack web developer</h3>
<div class="text-sm font-medium">
<span class="m-1 ml-0 inline-block text-blue-500">HTML</span>
<span class="m-1 ml-0 inline-block text-yellow-500">CSS</span>
<span class="m-1 ml-0 inline-block text-pink-500">TAILWIND CSS</span>
<span class="m-1 ml-0 inline-block text-lime-500">FIGMA</span>
<span class="m-1 ml-0 inline-block text-blue-500">UI/UX</span>
</div>
<div class="mt-2 text-sm text-gray-400">$60K - $100K per year</div>
</div>
<div class="flex items-center justify-between">
<span class="text-sm font-medium text-gray-50">Full Time</span>
<a class="font-medium text-blue-500 transition-all duration-300 group-hover:text-blue-500/80">Apply Now</a>
</div>
</div>
</div>
<div class="col-span-12 sm:col-span-6 lg:col-span-4">
<div class="group bg-gray-900 p-4 transition-all duration-300 hover:rotate-1 lg:p-8">
<div class="mb-3 text-right">
<button class="text-gray-50 transition-all duration-300 hover:scale-110 hover:text-red-600">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-6 w-6">
<path d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001a.752.752 0 01-.704 0l-.003-.001z" />
</svg>
</button>
</div>
<div class="flex items-center gap-x-2">
<img class="aspect-[2/2] w-16" src="https://img.icons8.com/bubbles/50/null/facebook-new.png" />
<div>
<h3 class="text-xl font-bold text-gray-50">Facebook Meta</h3>
<span class="text-xs text-gray-300">New location, USA</span>
</div>
</div>
<div class="my-4">
<h3 class="text-2xl font-medium text-gray-200">Full stack web developer</h3>
<div class="text-sm font-medium">
<span class="m-1 ml-0 inline-block text-blue-500">HTML</span>
<span class="m-1 ml-0 inline-block text-yellow-500">CSS</span>
<span class="m-1 ml-0 inline-block text-pink-500">TAILWIND CSS</span>
<span class="m-1 ml-0 inline-block text-lime-500">FIGMA</span>
<span class="m-1 ml-0 inline-block text-blue-500">UI/UX</span>
</div>
<div class="mt-2 text-sm text-gray-400">$60K - $100K per year</div>
</div>
<div class="flex items-center justify-between">
<span class="text-sm font-medium text-gray-50">Full Time</span>
<a class="font-medium text-blue-500 transition-all duration-300 group-hover:text-blue-500/80">Apply Now</a>
</div>
</div>
</div>
<div class="col-span-12 sm:col-span-6 lg:col-span-4">
<div class="group bg-gray-900 p-4 transition-all duration-300 hover:rotate-1 lg:p-8">
<div class="mb-3 text-right">
<button class="text-gray-50 transition-all duration-300 hover:scale-110 hover:text-red-600">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-6 w-6">
<path d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001a.752.752 0 01-.704 0l-.003-.001z" />
</svg>
</button>
</div>
<div class="flex items-center gap-x-2">
<img class="aspect-[2/2] w-16" src="https://img.icons8.com/bubbles/50/null/facebook-new.png" />
<div>
<h3 class="text-xl font-bold text-gray-50">Facebook Meta</h3>
<span class="text-xs text-gray-300">New location, USA</span>
</div>
</div>
<div class="my-4">
<h3 class="text-2xl font-medium text-gray-200">Full stack web developer</h3>
<div class="text-sm font-medium">
<span class="m-1 ml-0 inline-block text-blue-500">HTML</span>
<span class="m-1 ml-0 inline-block text-yellow-500">CSS</span>
<span class="m-1 ml-0 inline-block text-pink-500">TAILWIND CSS</span>
<span class="m-1 ml-0 inline-block text-lime-500">FIGMA</span>
<span class="m-1 ml-0 inline-block text-blue-500">UI/UX</span>
</div>
<div class="mt-2 text-sm text-gray-400">$60K - $100K per year</div>
</div>
<div class="flex items-center justify-between">
<span class="text-sm font-medium text-gray-50">Full Time</span>
<a class="font-medium text-blue-500 transition-all duration-300 group-hover:text-blue-500/80">Apply Now</a>
</div>
</div>
</div>
<div class="col-span-12 sm:col-span-6 lg:col-span-4">
<div class="group bg-gray-900 p-4 transition-all duration-300 hover:rotate-1 lg:p-8">
<div class="mb-3 text-right">
<button class="text-gray-50 transition-all duration-300 hover:scale-110 hover:text-red-600">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-6 w-6">
<path d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001a.752.752 0 01-.704 0l-.003-.001z" />
</svg>
</button>
</div>
<div class="flex items-center gap-x-2">
<img class="aspect-[2/2] w-16" src="https://img.icons8.com/bubbles/50/null/facebook-new.png" />
<div>
<h3 class="text-xl font-bold text-gray-50">Facebook Meta</h3>
<span class="text-xs text-gray-300">New location, USA</span>
</div>
</div>
<div class="my-4">
<h3 class="text-2xl font-medium text-gray-200">Full stack web developer</h3>
<div class="text-sm font-medium">
<span class="m-1 ml-0 inline-block text-blue-500">HTML</span>
<span class="m-1 ml-0 inline-block text-yellow-500">CSS</span>
<span class="m-1 ml-0 inline-block text-pink-500">TAILWIND CSS</span>
<span class="m-1 ml-0 inline-block text-lime-500">FIGMA</span>
<span class="m-1 ml-0 inline-block text-blue-500">UI/UX</span>
</div>
<div class="mt-2 text-sm text-gray-400">$60K - $100K per year</div>
</div>
<div class="flex items-center justify-between">
<span class="text-sm font-medium text-gray-50">Full Time</span>
<a class="font-medium text-blue-500 transition-all duration-300 group-hover:text-blue-500/80">Apply Now</a>
</div>
</div>
</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 more Job</button>
</div>
</div>
</div>
</section>
<!-- *********** -->
<!-- BROWSE JOB CATEGORY -->
<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>
<!-- ******************* -->
<!-- RECRUITERS SECTION -->
<section class="mt-8 bg-gradient-to-b from-gray-900 to-zinc-900 md:mt-12">
<div class="mx-auto max-w-screen-xl px-4 py-20 md:py-24">
<div class="text-center md:text-left">
<h3 class="text-3xl font-black text-gray-50">Top Recruiters</h3>
<p class="mt-2 text-sm font-medium text-gray-300">Discover your next career move, freelance gig, or internship</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="group block cursor-pointer bg-gray-800 p-4 shadow transition-all duration-300 hover:rotate-1">
<div class="flex items-center gap-x-2">
<img class="aspect-[2/2] h-16 w-16" src="https://img.icons8.com/fluency/48/null/linkedin-circled.png" />
<div>
<h3 class="text-xl font-bold text-gray-50">Linkedin</h3>
<p class="text-sm text-gray-300">25 Open Jobs</p>
</div>
</div>
<div class="mt-3 flex items-center justify-between gap-x-1">
<div class="flex items-center gap-x-1 text-sm text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-4 w-4">
<path fill-rule="evenodd" d="M11.54 22.351l.07.04.028.016a.76.76 0 00.723 0l.028-.015.071-.041a16.975 16.975 0 001.144-.742 19.58 19.58 0 002.683-2.282c1.944-1.99 3.963-4.98 3.963-8.827a8.25 8.25 0 00-16.5 0c0 3.846 2.02 6.837 3.963 8.827a19.58 19.58 0 002.682 2.282 16.975 16.975 0 001.145.742zM12 13.5a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
</svg>
<span>New location, USA</span>
</div>
<div class="transition-color text-sm font-medium text-blue-500 duration-300 group-hover:text-yellow-500">View Details</div>
</div>
</a>
</div>
<div class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3">
<a class="group block cursor-pointer bg-gray-800 p-4 shadow transition-all duration-300 hover:rotate-1">
<div class="flex items-center gap-x-2">
<img class="aspect-[2/2] h-16 w-16" src="https://img.icons8.com/fluency/48/null/google-logo.png" />
<div>
<h3 class="text-xl font-bold text-gray-50">Google</h3>
<p class="text-sm text-gray-300">25 Open Jobs</p>
</div>
</div>
<div class="mt-3 flex items-center justify-between gap-x-1">
<div class="flex items-center gap-x-1 text-sm text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-4 w-4">
<path fill-rule="evenodd" d="M11.54 22.351l.07.04.028.016a.76.76 0 00.723 0l.028-.015.071-.041a16.975 16.975 0 001.144-.742 19.58 19.58 0 002.683-2.282c1.944-1.99 3.963-4.98 3.963-8.827a8.25 8.25 0 00-16.5 0c0 3.846 2.02 6.837 3.963 8.827a19.58 19.58 0 002.682 2.282 16.975 16.975 0 001.145.742zM12 13.5a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
</svg>
<span>New location, USA</span>
</div>
<div class="transition-color text-sm font-medium text-blue-500 duration-300 group-hover:text-yellow-500">View Details</div>
</div>
</a>
</div>
<div class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3">
<a class="group block cursor-pointer bg-gray-800 p-4 shadow transition-all duration-300 hover:rotate-1">
<div class="flex items-center gap-x-2">
<img class="aspect-[2/2] h-16 w-16" src="https://img.icons8.com/fluency/48/null/youtube-play.png" />
<div>
<h3 class="text-xl font-bold text-gray-50">Youtube</h3>
<p class="text-sm text-gray-300">25 Open Jobs</p>
</div>
</div>
<div class="mt-3 flex items-center justify-between gap-x-1">
<div class="flex items-center gap-x-1 text-sm text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-4 w-4">
<path fill-rule="evenodd" d="M11.54 22.351l.07.04.028.016a.76.76 0 00.723 0l.028-.015.071-.041a16.975 16.975 0 001.144-.742 19.58 19.58 0 002.683-2.282c1.944-1.99 3.963-4.98 3.963-8.827a8.25 8.25 0 00-16.5 0c0 3.846 2.02 6.837 3.963 8.827a19.58 19.58 0 002.682 2.282 16.975 16.975 0 001.145.742zM12 13.5a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
</svg>
<span>New location, USA</span>
</div>
<div class="transition-color text-sm font-medium text-blue-500 duration-300 group-hover:text-yellow-500">View Details</div>
</div>
</a>
</div>
<div class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3">
<a class="group block cursor-pointer bg-gray-800 p-4 shadow transition-all duration-300 hover:rotate-1">
<div class="flex items-center gap-x-2">
<img class="aspect-[2/2] h-16 w-16" src="https://img.icons8.com/fluency/48/null/instagram-reel.png" />
<div>
<h3 class="text-xl font-bold text-gray-50">Instagram Reels</h3>
<p class="text-sm text-gray-300">25 Open Jobs</p>
</div>
</div>
<div class="mt-3 flex items-center justify-between gap-x-1">
<div class="flex items-center gap-x-1 text-sm text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-4 w-4">
<path fill-rule="evenodd" d="M11.54 22.351l.07.04.028.016a.76.76 0 00.723 0l.028-.015.071-.041a16.975 16.975 0 001.144-.742 19.58 19.58 0 002.683-2.282c1.944-1.99 3.963-4.98 3.963-8.827a8.25 8.25 0 00-16.5 0c0 3.846 2.02 6.837 3.963 8.827a19.58 19.58 0 002.682 2.282 16.975 16.975 0 001.145.742zM12 13.5a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
</svg>
<span>New location, USA</span>
</div>
<div class="transition-color text-sm font-medium text-blue-500 duration-300 group-hover:text-yellow-500">View Details</div>
</div>
</a>
</div>
<div class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3">
<a class="group block cursor-pointer bg-gray-800 p-4 shadow transition-all duration-300 hover:rotate-1">
<div class="flex items-center gap-x-2">
<img class="aspect-[2/2] h-16 w-16" src="https://img.icons8.com/fluency/48/null/twitter.png" />
<div>
<h3 class="text-xl font-bold text-gray-50">Twitter</h3>
<p class="text-sm text-gray-300">25 Open Jobs</p>
</div>
</div>
<div class="mt-3 flex items-center justify-between gap-x-1">
<div class="flex items-center gap-x-1 text-sm text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-4 w-4">
<path fill-rule="evenodd" d="M11.54 22.351l.07.04.028.016a.76.76 0 00.723 0l.028-.015.071-.041a16.975 16.975 0 001.144-.742 19.58 19.58 0 002.683-2.282c1.944-1.99 3.963-4.98 3.963-8.827a8.25 8.25 0 00-16.5 0c0 3.846 2.02 6.837 3.963 8.827a19.58 19.58 0 002.682 2.282 16.975 16.975 0 001.145.742zM12 13.5a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
</svg>
<span>New location, USA</span>
</div>
<div class="transition-color text-sm font-medium text-blue-500 duration-300 group-hover:text-yellow-500">View Details</div>
</div>
</a>
</div>
<div class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3">
<a class="group block cursor-pointer bg-gray-800 p-4 shadow transition-all duration-300 hover:rotate-1">
<div class="flex items-center gap-x-2">
<img class="aspect-[2/2] h-16 w-16" src="https://img.icons8.com/fluency/48/null/windows-10.png" />
<div>
<h3 class="text-xl font-bold text-gray-50">Windows</h3>
<p class="text-sm text-gray-300">25 Open Jobs</p>
</div>
</div>
<div class="mt-3 flex items-center justify-between gap-x-1">
<div class="flex items-center gap-x-1 text-sm text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-4 w-4">
<path fill-rule="evenodd" d="M11.54 22.351l.07.04.028.016a.76.76 0 00.723 0l.028-.015.071-.041a16.975 16.975 0 001.144-.742 19.58 19.58 0 002.683-2.282c1.944-1.99 3.963-4.98 3.963-8.827a8.25 8.25 0 00-16.5 0c0 3.846 2.02 6.837 3.963 8.827a19.58 19.58 0 002.682 2.282 16.975 16.975 0 001.145.742zM12 13.5a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
</svg>
<span>New location, USA</span>
</div>
<div class="transition-color text-sm font-medium text-blue-500 duration-300 group-hover:text-yellow-500">View Details</div>
</div>
</a>
</div>
<div class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3">
<a class="group block cursor-pointer bg-gray-800 p-4 shadow transition-all duration-300 hover:rotate-1">
<div class="flex items-center gap-x-2">
<img class="aspect-[2/2] h-16 w-16" src="https://img.icons8.com/fluency/48/null/mac-os.png" />
<div>
<h3 class="text-xl font-bold text-gray-50">Apple</h3>
<p class="text-sm text-gray-300">25 Open Jobs</p>
</div>
</div>
<div class="mt-3 flex items-center justify-between gap-x-1">
<div class="flex items-center gap-x-1 text-sm text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-4 w-4">
<path fill-rule="evenodd" d="M11.54 22.351l.07.04.028.016a.76.76 0 00.723 0l.028-.015.071-.041a16.975 16.975 0 001.144-.742 19.58 19.58 0 002.683-2.282c1.944-1.99 3.963-4.98 3.963-8.827a8.25 8.25 0 00-16.5 0c0 3.846 2.02 6.837 3.963 8.827a19.58 19.58 0 002.682 2.282 16.975 16.975 0 001.145.742zM12 13.5a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
</svg>
<span>New location, USA</span>
</div>
<div class="transition-color text-sm font-medium text-blue-500 duration-300 group-hover:text-yellow-500">View Details</div>
</div>
</a>
</div>
<div class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3">
<a class="group block cursor-pointer bg-gray-800 p-4 shadow transition-all duration-300 hover:rotate-1">
<div class="flex items-center gap-x-2">
<img class="aspect-[2/2] h-16 w-16" src="https://img.icons8.com/fluency/48/null/facebook-new.png" />
<div>
<h3 class="text-xl font-bold text-gray-50">Facebook</h3>
<p class="text-sm text-gray-300">25 Open Jobs</p>
</div>
</div>
<div class="mt-3 flex items-center justify-between gap-x-1">
<div class="flex items-center gap-x-1 text-sm text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-4 w-4">
<path fill-rule="evenodd" d="M11.54 22.351l.07.04.028.016a.76.76 0 00.723 0l.028-.015.071-.041a16.975 16.975 0 001.144-.742 19.58 19.58 0 002.683-2.282c1.944-1.99 3.963-4.98 3.963-8.827a8.25 8.25 0 00-16.5 0c0 3.846 2.02 6.837 3.963 8.827a19.58 19.58 0 002.682 2.282 16.975 16.975 0 001.145.742zM12 13.5a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
</svg>
<span>New location, USA</span>
</div>
<div class="transition-color text-sm font-medium text-blue-500 duration-300 group-hover:text-yellow-500">View Details</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 Recruiters</button>
</div>
</div>
</div>
</section>
<!-- ****************** -->
<section class="mt-8 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">Jobs by Location</h3>
<p class="mt-2 text-sm font-medium text-gray-300">Find your favourite jobs and get the benefits of yourself</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 lg:col-span-4">
<a class="block cursor-pointer bg-gray-900 p-4 transition-all duration-300 hover:rotate-1">
<div class="flex flex-col gap-y-2">
<img class="aspect-[2/2] h-[240px] w-full object-cover" src="https://images.pexels.com/photos/460672/pexels-photo-460672.jpeg?auto=compress&cs=tinysrgb&w=800" />
<div>
<h3 class="text-xl font-bold text-gray-50">London, UK</h3>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-300">1000 Jobs Available</p>
<p class="text-sm text-gray-300">10 Companies</p>
</div>
</div>
</div>
</a>
</div>
<div class="col-span-12 sm:col-span-6 lg:col-span-4">
<a class="block cursor-pointer bg-gray-900 p-4 transition-all duration-300 hover:rotate-1">
<div class="flex flex-col gap-y-2">
<img class="aspect-[2/2] h-[240px] w-full object-cover" src="https://images.pexels.com/photos/5414583/pexels-photo-5414583.jpeg?auto=compress&cs=tinysrgb&w=1200" />
<div>
<h3 class="text-xl font-bold text-gray-50">Bumbay, India</h3>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-300">1000 Jobs Available</p>
<p class="text-sm text-gray-300">10 Companies</p>
</div>
</div>
</div>
</a>
</div>
<div class="col-span-12 sm:col-span-6 lg:col-span-4">
<a class="block cursor-pointer bg-gray-900 p-4 transition-all duration-300 hover:rotate-1">
<div class="flex flex-col gap-y-2">
<img class="aspect-[2/2] h-[240px] w-full object-cover" src="https://images.pexels.com/photos/2104882/pexels-photo-2104882.jpeg?auto=compress&cs=tinysrgb&w=1200" />
<div>
<h3 class="text-xl font-bold text-gray-50">Kathmandu, Nepal</h3>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-300">1000 Jobs Available</p>
<p class="text-sm text-gray-300">10 Companies</p>
</div>
</div>
</div>
</a>
</div>
<div class="col-span-12 sm:col-span-6 lg:col-span-4">
<a class="block cursor-pointer bg-gray-900 p-4 transition-all duration-300 hover:rotate-1">
<div class="flex flex-col gap-y-2">
<img class="aspect-[2/2] h-[240px] w-full object-cover" src="https://images.pexels.com/photos/3964406/pexels-photo-3964406.jpeg?auto=compress&cs=tinysrgb&w=1200" />
<div>
<h3 class="text-xl font-bold text-gray-50">Washington, USA</h3>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-300">1000 Jobs Available</p>
<p class="text-sm text-gray-300">10 Companies</p>
</div>
</div>
</div>
</a>
</div>
<div class="col-span-12 sm:col-span-6 lg:col-span-4">
<a class="block cursor-pointer bg-gray-900 p-4 transition-all duration-300 hover:rotate-1">
<div class="flex flex-col gap-y-2">
<img class="aspect-[2/2] h-[240px] w-full object-cover" src="https://images.pexels.com/photos/532826/pexels-photo-532826.jpeg?auto=compress&cs=tinysrgb&w=1200" />
<div>
<h3 class="text-xl font-bold text-gray-50">Paris</h3>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-300">1000 Jobs Available</p>
<p class="text-sm text-gray-300">10 Companies</p>
</div>
</div>
</div>
</a>
</div>
<div class="col-span-12 sm:col-span-6 lg:col-span-4">
<a class="block cursor-pointer bg-gray-900 p-4 transition-all duration-300 hover:rotate-1">
<div class="flex flex-col gap-y-2">
<img class="aspect-[2/2] h-[240px] w-full object-cover" src="https://images.pexels.com/photos/683419/pexels-photo-683419.jpeg?auto=compress&cs=tinysrgb&w=1200" />
<div>
<h3 class="text-xl font-bold text-gray-50">Shanghai, China</h3>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-300">1000 Jobs Available</p>
<p class="text-sm text-gray-300">10 Companies</p>
</div>
</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</button>
</div>
</div>
</div>
</section>
<!-- BLOG SECTIONS -->
<section class="mt-8 md:mt-12">
<div class="mx-auto max-w-screen-xl px-4 pt-12 pb-28">
<div class="text-center md:text-left">
<h3 class="text-3xl font-black text-gray-50">News and Blog</h3>
<p class="mt-2 text-sm font-medium text-gray-300">Get the latest news, updates and tips</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 lg:col-span-4">
<a class="group block cursor-pointer bg-gray-900 transition-all duration-300 hover:rotate-1">
<div class="flex flex-col gap-x-2">
<img class="aspect-[2/2] h-[200px] object-cover transition-all duration-300 group-hover:h-[210px]" src="https://images.pexels.com/photos/3768892/pexels-photo-3768892.jpeg?auto=compress&cs=tinysrgb&w=1200" />
<div class="p-4">
<h3 class="transition-color text-lg font-bold text-gray-50 duration-300 group-hover:text-yellow-600">Lorem ipsum dolor sit amet consectetu?</h3>
<p class="text-sm text-gray-300">16th may 2022</p>
</div>
<div class="transition-color mx-auto -mb-[3px] h-1 w-[80%] rounded-lg bg-gray-600 duration-300 group-hover:bg-yellow-600"></div>
</div>
</a>
</div>
<div class="col-span-12 sm:col-span-6 lg:col-span-4">
<a class="group block cursor-pointer bg-gray-900 transition-all duration-300 hover:rotate-1">
<div class="flex flex-col gap-x-2">
<img class="aspect-[2/2] h-[200px] object-cover transition-all duration-300 group-hover:h-[210px]" src="https://images.pexels.com/photos/2738173/pexels-photo-2738173.jpeg?auto=compress&cs=tinysrgb&w=1200" />
<div class="p-4">
<h3 class="transition-color text-lg font-bold text-gray-50 duration-300 group-hover:text-yellow-600">Lorem ipsum dolor sit amet consectetu?</h3>
<p class="text-sm text-gray-300">16th may 2022</p>
</div>
<div class="transition-color mx-auto -mb-[3px] h-1 w-[80%] rounded-lg bg-gray-600 duration-300 group-hover:bg-yellow-600"></div>
</div>
</a>
</div>
<div class="col-span-12 sm:col-span-6 lg:col-span-4">
<a class="group block cursor-pointer bg-gray-900 transition-all duration-300 hover:rotate-1">
<div class="flex flex-col gap-x-2">
<img class="aspect-[2/2] h-[200px] object-cover transition-all duration-300 group-hover:h-[210px]" src="https://images.pexels.com/photos/1766604/pexels-photo-1766604.jpeg?auto=compress&cs=tinysrgb&w=1200" />
<div class="p-4">
<h3 class="transition-color text-lg font-bold text-gray-50 duration-300 group-hover:text-yellow-600">Lorem ipsum dolor sit amet consectetu?</h3>
<p class="text-sm text-gray-300">16th may 2022</p>
</div>
<div class="transition-color mx-auto -mb-[3px] h-1 w-[80%] rounded-lg bg-gray-600 duration-300 group-hover:bg-yellow-600"></div>
</div>
</a>
</div>
<div class="col-span-12 sm:col-span-6 lg:col-span-4">
<a class="group block cursor-pointer bg-gray-900 transition-all duration-300 hover:rotate-1">
<div class="flex flex-col gap-x-2">
<img class="aspect-[2/2] h-[200px] object-cover transition-all duration-300 group-hover:h-[210px]" src="https://images.pexels.com/photos/3769021/pexels-photo-3769021.jpeg?auto=compress&cs=tinysrgb&w=1200" />
<div class="p-4">
<h3 class="transition-color text-lg font-bold text-gray-50 duration-300 group-hover:text-yellow-600">Lorem ipsum dolor sit amet consectetu?</h3>
<p class="text-sm text-gray-300">16th may 2022</p>
</div>
<div class="transition-color mx-auto -mb-[3px] h-1 w-[80%] rounded-lg bg-gray-600 duration-300 group-hover:bg-yellow-600"></div>
</div>
</a>
</div>
<div class="col-span-12 sm:col-span-6 lg:col-span-4">
<a class="group block cursor-pointer bg-gray-900 transition-all duration-300 hover:rotate-1">
<div class="flex flex-col gap-x-2">
<img class="aspect-[2/2] h-[200px] object-cover transition-all duration-300 group-hover:h-[210px]" src="https://images.pexels.com/photos/2738173/pexels-photo-2738173.jpeg?auto=compress&cs=tinysrgb&w=1200" />
<div class="p-4">
<h3 class="transition-color text-lg font-bold text-gray-50 duration-300 group-hover:text-yellow-600">Lorem ipsum dolor sit amet consectetu?</h3>
<p class="text-sm text-gray-300">16th may 2022</p>
</div>
<div class="transition-color mx-auto -mb-[3px] h-1 w-[80%] rounded-lg bg-gray-600 duration-300 group-hover:bg-yellow-600"></div>
</div>
</a>
</div>
<div class="col-span-12 sm:col-span-6 lg:col-span-4">
<a class="group block cursor-pointer bg-gray-900 transition-all duration-300 hover:rotate-1">
<div class="flex flex-col gap-x-2">
<img class="aspect-[2/2] h-[200px] object-cover transition-all duration-300 group-hover:h-[210px]" src="https://images.pexels.com/photos/1766604/pexels-photo-1766604.jpeg?auto=compress&cs=tinysrgb&w=1200" />
<div class="p-4">
<h3 class="transition-color text-lg font-bold text-gray-50 duration-300 group-hover:text-yellow-600">Lorem ipsum dolor sit amet consectetu?</h3>
<p class="text-sm text-gray-300">16th may 2022</p>
</div>
<div class="transition-color mx-auto -mb-[3px] h-1 w-[80%] rounded-lg bg-gray-600 duration-300 group-hover:bg-yellow-600"></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</button>
</div>
</div>
</div>
</section>
<!-- ************* -->
</main>
<!-- FOOTER SECTION -->
<footer aria-label="Site footer" class="bg-gradient-to-b from-gray-900 to-zinc-900 px-8 py-20 md:py-24">
<div class="mx-auto max-w-screen-xl">
<div class="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">
<ul class="flex flex-col gap-y-2">
<li class="text-lg font-medium text-gray-200">COMPANY</li>
<li>
<a class="cursor-pointer text-sm text-gray-300 hover:text-gray-300/60">About</a>
</li>
<li>
<a class="cursor-pointer text-sm text-gray-300 hover:text-gray-300/60">How it works</a>
</li>
<li>
<a class="cursor-pointer text-sm text-gray-300 hover:text-gray-300/60">Careers</a>
</li>
</ul>
</div>
<div class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3">
<ul class="flex flex-col gap-y-2">
<li class="text-lg font-medium text-gray-200">HELP</li>
<li>
<a class="cursor-pointer text-sm text-gray-300 hover:text-gray-300/60">Contact us</a>
</li>
<li>
<a class="cursor-pointer text-sm text-gray-300 hover:text-gray-300/60">FAQ</a>
</li>
<li>
<a class="cursor-pointer text-sm text-gray-300 hover:text-gray-300/60">Legal & Privacy</a>
</li>
<li>
<a class="cursor-pointer text-sm text-gray-300 hover:text-gray-300/60">Disclaimer</a>
</li>
</ul>
</div>
<div class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3">
<ul class="flex flex-col gap-y-2">
<li class="text-lg font-medium text-gray-200">TOOLS</li>
<li>
<a class="cursor-pointer text-sm text-gray-300 hover:text-gray-300/60">Resume Builder</a>
</li>
<li>
<a class="cursor-pointer text-sm text-gray-300 hover:text-gray-300/60">Coverletter Generator</a>
</li>
<li>
<a class="cursor-pointer text-sm text-gray-300 hover:text-gray-300/60">Tax Calculator</a>
</li>
<li>
<a class="cursor-pointer text-sm text-gray-300 hover:text-gray-300/60">Blog & News</a>
</li>
</ul>
</div>
<div class="col-span-12 sm:col-span-6 md:col-span-6 lg:col-span-3">
<div>
<a class="flex cursor-pointer items-center gap-x-1 text-gray-300 transition-all duration-300 hover:opacity-80">
<div>
<span class="text-xl font-bold">Gorkha</span>
<span class="text-xl font-bold text-yellow-600">Job</span>
</div>
</a>
<div class="mt-3 text-sm text-gray-300">654 Shadow Brook St. Palatine, IL 60067</div>
<a class="my-3 block cursor-pointer text-sm font-medium text-gray-300">+1 123 12 12 123</a>
<a class="cursor-pointer font-medium text-gray-300 underline hover:text-gray-300/60 focus:text-gray-300/60">youremail@gmail.com</a>
<ul class="mt-6 flex gap-6">
<li>
<a href="/" rel="noreferrer" target="_blank" class="text-gray-300 transition hover:text-gray-300/60 focus:text-gray-300/60">
<span class="sr-only">Facebook</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
</li>
<li>
<a href="/" rel="noreferrer" target="_blank" class="text-gray-300 transition hover:text-gray-300/60 focus:text-gray-300/60">
<span class="sr-only">Instagram</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" />
</svg>
</a>
</li>
<li>
<a href="/" rel="noreferrer" target="_blank" class="text-gray-300 transition hover:text-gray-300/60 focus:text-gray-300/60">
<span class="sr-only">Twitter</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
</svg>
</a>
</li>
<li>
<a href="/" rel="noreferrer" target="_blank" class="text-gray-300 transition hover:text-gray-300/60 focus:text-gray-300/60">
<span class="sr-only">GitHub</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
</svg>
</a>
</li>
<li>
<a href="/" rel="noreferrer" target="_blank" class="text-gray-300 transition hover:text-gray-300/60 focus:text-gray-300/60">
<span class="sr-only">Dribbble</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z" clip-rule="evenodd" />
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="mt-12">
<div class="text-sm font-medium text-gray-300">© 2022 All right reserved | Made by ankitcodes</div>
<div class="mt-4 text-sm text-gray-300">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione eveniet deserunt nisi, eligendi blanditiis sequi officiis laudantium voluptatum reprehenderit esse ipsa animi minus. Illum vero, voluptatem cumque quas obcaecati quis.</div>
</div>
</div>
</footer>
<!-- ************** -->