<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>
