Tailwind Careers Components in Consulty library

<section class="bg-gray-50 pt-32 pb-40">
    <div class="container mx-auto px-4">
        <div class="flex flex-wrap -m-4">
            <div class="w-full lg:w-1/2 p-4">
                <h1 class="font-heading tracking-tight text-4xl md:text-5xl font-medium mb-4">Open Positions</h1>
                <p class="tracking-tight text-gray-600 max-w-sm">It is a long established fact that a reader will be distracted by the readable.</p>
            </div>
            <div class="w-full lg:w-1/2 p-4">
                <p class="tracking-tight text-gray-700 font-medium mb-5">Design</p>
                <div class="bg-white rounded-2xl p-5 flex items-center justify-between flex-wrap gap-4 mb-2">
                    <div>
                        <div class="flex items-center gap-2 flex-wrap mb-2">
                            <p class="tracking-tight text-lg font-semibold">Product Designer</p>
                            <span class="inline-block py-1 px-2 rounded-3xl border border-orange-100 bg-orange-50 tracking-tight text-orange-500 text-xs font-medium">Full Time</span>
                        </div>
                        <div class="flex gap-3 items-center">
                            <p class="tracking-tight text-gray-700 text-sm">New York</p>
                            <svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4" fill="none">
                                <circle cx="2" cy="2" r="2" fill="#71717A"></circle>    
                            </svg>
                            <p class="tracking-tight text-gray-700 text-sm">$60k - $72k</p>
                        </div>
                    </div>
                    <a href="#" class="bg-white border border-gray-200 h-11 rounded-full px-4 py-2 inline-flex items-center justify-center gap-2 hover:bg-black group transition duration-200">
                        <span class="tracking-tight text-sm font-semibold text-gray-900 group-hover:text-white transition duration-200">Apply Now</span>
                        <div class="group-hover:text-white transition duration-200">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                                <path d="M12.25 5.83334H6.41667C3.83934 5.83334 1.75 7.92268 1.75 10.5V11.6667M12.25 5.83334L8.75 9.33334M12.25 5.83334L8.75 2.33334" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                        </div>
                    </a>
                </div>
                <div class="bg-white rounded-2xl p-5 flex items-center justify-between flex-wrap gap-4 mb-6">
                    <div>
                        <div class="flex items-center gap-2 flex-wrap mb-2">
                            <p class="tracking-tight text-lg font-semibold">Senior UX Designer</p>
                            <span class="inline-block py-1 px-2 rounded-3xl border border-orange-100 bg-orange-50 tracking-tight text-orange-500 text-xs font-medium">Full Time</span>
                        </div>
                        <div class="flex gap-3 items-center">
                            <p class="tracking-tight text-gray-700 text-sm">New York</p>
                            <svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4" fill="none">
                                <circle cx="2" cy="2" r="2" fill="#71717A"></circle>    
                            </svg>
                            <p class="tracking-tight text-gray-700 text-sm">$120k - $150k</p>
                        </div>
                    </div>
                    <a href="#" class="bg-white border border-gray-200 h-11 rounded-full px-4 py-2 inline-flex items-center justify-center gap-2 hover:bg-black group transition duration-200">
                        <span class="tracking-tight text-sm font-semibold text-gray-900 group-hover:text-white transition duration-200">Apply Now</span>
                        <div class="group-hover:text-white transition duration-200">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                                <path d="M12.25 5.83334H6.41667C3.83934 5.83334 1.75 7.92268 1.75 10.5V11.6667M12.25 5.83334L8.75 9.33334M12.25 5.83334L8.75 2.33334" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                        </div>
                    </a>
                </div>
                <p class="tracking-tight text-gray-700 font-medium mb-5">Engineering</p>
                <div class="bg-white rounded-2xl p-5 flex items-center justify-between flex-wrap gap-4 mb-2">
                    <div>
                        <div class="flex items-center gap-2 flex-wrap mb-2">
                            <p class="tracking-tight text-lg font-semibold">Jr. Software Developer</p>
                            <span class="inline-block py-1 px-2 rounded-3xl border border-orange-100 bg-orange-50 tracking-tight text-orange-500 text-xs font-medium">Remote</span>
                        </div>
                        <div class="flex gap-3 items-center">
                            <p class="tracking-tight text-gray-700 text-sm">New York</p>
                            <svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4" fill="none">
                                <circle cx="2" cy="2" r="2" fill="#71717A"></circle>    
                            </svg>
                            <p class="tracking-tight text-gray-700 text-sm">$60k - $72k</p>
                        </div>
                    </div>
                    <a href="#" class="bg-white border border-gray-200 h-11 rounded-full px-4 py-2 inline-flex items-center justify-center gap-2 hover:bg-black group transition duration-200">
                        <span class="tracking-tight text-sm font-semibold text-gray-900 group-hover:text-white transition duration-200">Apply Now</span>
                        <div class="group-hover:text-white transition duration-200">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                                <path d="M12.25 5.83334H6.41667C3.83934 5.83334 1.75 7.92268 1.75 10.5V11.6667M12.25 5.83334L8.75 9.33334M12.25 5.83334L8.75 2.33334" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                        </div>
                    </a>
                </div>
                <div class="bg-white rounded-2xl p-5 flex items-center justify-between flex-wrap gap-4">
                    <div>
                        <div class="flex items-center gap-2 flex-wrap mb-2">
                            <p class="tracking-tight text-lg font-semibold">Full-stack Developer</p>
                            <span class="inline-block py-1 px-2 rounded-3xl border border-orange-100 bg-orange-50 tracking-tight text-orange-500 text-xs font-medium">Full Time</span>
                        </div>
                        <div class="flex gap-3 items-center">
                            <p class="tracking-tight text-gray-700 text-sm">New York</p>
                            <svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4" fill="none">
                                <circle cx="2" cy="2" r="2" fill="#71717A"></circle>    
                            </svg>
                            <p class="tracking-tight text-gray-700 text-sm">$120k - $150k</p>
                        </div>
                    </div>
                    <a href="#" class="bg-white border border-gray-200 h-11 rounded-full px-4 py-2 inline-flex items-center justify-center gap-2 hover:bg-black group transition duration-200">
                        <span class="tracking-tight text-sm font-semibold text-gray-900 group-hover:text-white transition duration-200">Apply Now</span>
                        <div class="group-hover:text-white transition duration-200">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                                <path d="M12.25 5.83334H6.41667C3.83934 5.83334 1.75 7.92268 1.75 10.5V11.6667M12.25 5.83334L8.75 9.33334M12.25 5.83334L8.75 2.33334" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>