<section x-data="{ category: 'design' }" class="py-10 bg-gray-900 overflow-hidden">
<div class="container mx-auto px-4">
<div class="py-16 px-8 bg-gray-800 rounded-3xl">
<div class="max-w-7xl mx-auto">
<div class="mb-10 md:max-w-4xl mx-auto text-center">
<span class="inline-block mb-4 text-sm text-blue-500 font-bold uppercase tracking-widest">We are hiring</span>
<h2 class="font-heading mb-6 text-4xl md:text-5xl lg:text-6xl text-white font-black tracking-tight">Open positions</h2>
<p class="md:max-w-md mx-auto text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
</div>
<ul class="flex flex-wrap justify-center -m-3 mb-16">
<li class="w-auto p-3"><a x-on:click.prevent="category = 'all'" class="inline-block px-8 py-3.5 text-lg font-bold bg-gray-900 hover:bg-white hover:text-gray-900 text-white rounded-full" :class="{'bg-white': category == 'all', 'bg-gray-900 hover:bg-white hover:text-gray-900 text-white': category !== 'all' }" href="#">All</a></li>
<li class="w-auto p-3"><a x-on:click.prevent="category = 'design'" class="inline-block px-8 py-3.5 text-lg font-bold bg-white rounded-full" :class="{'bg-white': category == 'design', 'bg-gray-900 hover:bg-white hover:text-gray-900 text-white': category !== 'design' }" href="#">Design</a></li>
<li class="w-auto p-3"><a x-on:click.prevent="category = 'development'" class="inline-block px-8 py-3.5 text-lg font-bold bg-gray-900 hover:bg-white hover:text-gray-900 text-white rounded-full" :class="{'bg-white': category == 'development', 'bg-gray-900 hover:bg-white hover:text-gray-900 text-white': category !== 'development' }" href="#">Development</a></li>
<li class="w-auto p-3"><a x-on:click.prevent="category = 'marketing'" class="inline-block px-8 py-3.5 text-lg font-bold bg-gray-900 hover:bg-white hover:text-gray-900 text-white rounded-full" :class="{'bg-white': category == 'marketing', 'bg-gray-900 hover:bg-white hover:text-gray-900 text-white': category !== 'marketing' }" href="#">Marketing</a></li>
</ul>
<div class="flex flex-wrap -m-8">
<div class="w-full md:w-1/4 p-8">
<h2 class="visibility-item font-heading text-4xl text-white font-black tracking-tight" x-show="category == 'all'">All</h2>
<h2 class="font-heading text-4xl text-white font-black tracking-tight" x-show="category == 'design'">Design</h2>
<h2 class="visibility-item font-heading text-4xl text-white font-black tracking-tight" x-show="category == 'development'">Development</h2>
<h2 class="visibility-item font-heading text-4xl text-white font-black tracking-tight" x-show="category == 'marketing'">Marketing</h2>
</div>
<div class="w-full md:flex-1 p-8">
<div x-show="category == 'all'" class="visibility-item flex flex-wrap -m-3">
<div class="w-full p-3">
<div class="p-10 bg-gray-900 rounded-3xl">
<div class="flex flex-wrap -m-2">
<div class="w-full md:w-1/2 p-2">
<h2 class="font-heading mb-2 text-3xl text-gray-50 font-black tracking-tight">Senior Product Designer</h2>
<p class="mb-10 text-gray-500 font-bold">Part time • Remotly</p>
<a class="flex items-center text-blue-500 hover:text-blue-600" href="#">
<span class="mr-0.5 font-black">Apply Now</span>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.6805 3.5465L8.82049 5.6865L10.1338 6.99317C10.6872 7.5465 10.6872 8.4465 10.1338 8.99983L6.6805 12.4532C6.22716 12.9065 5.45383 12.5798 5.45383 11.9465V8.2065V4.05317C5.45383 3.41317 6.22716 3.09317 6.6805 3.5465Z" fill="currentColor"></path>
</svg>
</a>
</div>
<div class="w-full md:w-1/2 p-2">
<p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
</div>
</div>
</div>
</div>
<div class="w-full p-3">
<div class="p-10 bg-gray-900 rounded-3xl">
<div class="flex flex-wrap -m-2">
<div class="w-full md:w-1/2 p-2">
<h2 class="font-heading mb-2 text-3xl text-gray-50 font-black tracking-tight">Creative Director</h2>
<p class="mb-10 text-gray-500 font-bold">Part time • Remotly</p>
<a class="flex items-center text-blue-500 hover:text-blue-600" href="#">
<span class="mr-0.5 font-black">Apply Now</span>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.6805 3.5465L8.82049 5.6865L10.1338 6.99317C10.6872 7.5465 10.6872 8.4465 10.1338 8.99983L6.6805 12.4532C6.22716 12.9065 5.45383 12.5798 5.45383 11.9465V8.2065V4.05317C5.45383 3.41317 6.22716 3.09317 6.6805 3.5465Z" fill="currentColor"></path>
</svg>
</a>
</div>
<div class="w-full md:w-1/2 p-2">
<p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
</div>
</div>
</div>
</div>
<div class="w-full p-3">
<div class="p-10 bg-gray-900 rounded-3xl">
<div class="flex flex-wrap -m-2">
<div class="w-full md:w-1/2 p-2">
<h2 class="font-heading mb-2 text-3xl text-gray-50 font-black tracking-tight">UI/UX Designer</h2>
<p class="mb-10 text-gray-500 font-bold">Part time • Remotly</p>
<a class="flex items-center text-blue-500 hover:text-blue-600" href="#">
<span class="mr-0.5 font-black">Apply Now</span>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.6805 3.5465L8.82049 5.6865L10.1338 6.99317C10.6872 7.5465 10.6872 8.4465 10.1338 8.99983L6.6805 12.4532C6.22716 12.9065 5.45383 12.5798 5.45383 11.9465V8.2065V4.05317C5.45383 3.41317 6.22716 3.09317 6.6805 3.5465Z" fill="currentColor"></path>
</svg>
</a>
</div>
<div class="w-full md:w-1/2 p-2">
<p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
</div>
</div>
</div>
</div>
<div class="w-full p-3">
<div class="p-10 bg-gray-900 rounded-3xl">
<div class="flex flex-wrap -m-2">
<div class="w-full md:w-1/2 p-2">
<h2 class="font-heading mb-2 text-3xl text-gray-50 font-black tracking-tight">Full-stack Developer</h2>
<p class="mb-10 text-gray-500 font-bold">Part time • Remotly</p>
<a class="flex items-center text-blue-500 hover:text-blue-600" href="#">
<span class="mr-0.5 font-black">Apply Now</span>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.6805 3.5465L8.82049 5.6865L10.1338 6.99317C10.6872 7.5465 10.6872 8.4465 10.1338 8.99983L6.6805 12.4532C6.22716 12.9065 5.45383 12.5798 5.45383 11.9465V8.2065V4.05317C5.45383 3.41317 6.22716 3.09317 6.6805 3.5465Z" fill="currentColor"></path>
</svg>
</a>
</div>
<div class="w-full md:w-1/2 p-2">
<p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
</div>
</div>
</div>
</div>
<div class="w-full p-3">
<div class="p-10 bg-gray-900 rounded-3xl">
<div class="flex flex-wrap -m-2">
<div class="w-full md:w-1/2 p-2">
<h2 class="font-heading mb-2 text-3xl text-gray-50 font-black tracking-tight">Jr. Software Developer</h2>
<p class="mb-10 text-gray-500 font-bold">Part time • Remotly</p>
<a class="flex items-center text-blue-500 hover:text-blue-600" href="#">
<span class="mr-0.5 font-black">Apply Now</span>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.6805 3.5465L8.82049 5.6865L10.1338 6.99317C10.6872 7.5465 10.6872 8.4465 10.1338 8.99983L6.6805 12.4532C6.22716 12.9065 5.45383 12.5798 5.45383 11.9465V8.2065V4.05317C5.45383 3.41317 6.22716 3.09317 6.6805 3.5465Z" fill="currentColor"></path>
</svg>
</a>
</div>
<div class="w-full md:w-1/2 p-2">
<p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
</div>
</div>
</div>
</div>
<div class="w-full p-3">
<div class="p-10 bg-gray-900 rounded-3xl">
<div class="flex flex-wrap -m-2">
<div class="w-full md:w-1/2 p-2">
<h2 class="font-heading mb-2 text-3xl text-gray-50 font-black tracking-tight">Senior Developer</h2>
<p class="mb-10 text-gray-500 font-bold">Part time • Remotly</p>
<a class="flex items-center text-blue-500 hover:text-blue-600" href="#">
<span class="mr-0.5 font-black">Apply Now</span>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.6805 3.5465L8.82049 5.6865L10.1338 6.99317C10.6872 7.5465 10.6872 8.4465 10.1338 8.99983L6.6805 12.4532C6.22716 12.9065 5.45383 12.5798 5.45383 11.9465V8.2065V4.05317C5.45383 3.41317 6.22716 3.09317 6.6805 3.5465Z" fill="currentColor"></path>
</svg>
</a>
</div>
<div class="w-full md:w-1/2 p-2">
<p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
</div>
</div>
</div>
</div>
<div class="w-full p-3">
<div class="p-10 bg-gray-900 rounded-3xl">
<div class="flex flex-wrap -m-2">
<div class="w-full md:w-1/2 p-2">
<h2 class="font-heading mb-2 text-3xl text-gray-50 font-black tracking-tight">Content/Social Media Manager</h2>
<p class="mb-10 text-gray-500 font-bold">Part time • Remotly</p>
<a class="flex items-center text-blue-500 hover:text-blue-600" href="#">
<span class="mr-0.5 font-black">Apply Now</span>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.6805 3.5465L8.82049 5.6865L10.1338 6.99317C10.6872 7.5465 10.6872 8.4465 10.1338 8.99983L6.6805 12.4532C6.22716 12.9065 5.45383 12.5798 5.45383 11.9465V8.2065V4.05317C5.45383 3.41317 6.22716 3.09317 6.6805 3.5465Z" fill="currentColor"></path>
</svg>
</a>
</div>
<div class="w-full md:w-1/2 p-2">
<p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
</div>
</div>
</div>
</div>
<div class="w-full p-3">
<div class="p-10 bg-gray-900 rounded-3xl">
<div class="flex flex-wrap -m-2">
<div class="w-full md:w-1/2 p-2">
<h2 class="font-heading mb-2 text-3xl text-gray-50 font-black tracking-tight">Digital Marketing Manager</h2>
<p class="mb-10 text-gray-500 font-bold">Part time • Remotly</p>
<a class="flex items-center text-blue-500 hover:text-blue-600" href="#">
<span class="mr-0.5 font-black">Apply Now</span>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.6805 3.5465L8.82049 5.6865L10.1338 6.99317C10.6872 7.5465 10.6872 8.4465 10.1338 8.99983L6.6805 12.4532C6.22716 12.9065 5.45383 12.5798 5.45383 11.9465V8.2065V4.05317C5.45383 3.41317 6.22716 3.09317 6.6805 3.5465Z" fill="currentColor"></path>
</svg>
</a>
</div>
<div class="w-full md:w-1/2 p-2">
<p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
</div>
</div>
</div>
</div>
<div class="w-full p-3">
<div class="p-10 bg-gray-900 rounded-3xl">
<div class="flex flex-wrap -m-2">
<div class="w-full md:w-1/2 p-2">
<h2 class="font-heading mb-2 text-3xl text-gray-50 font-black tracking-tight">Content Marketing Specialist</h2>
<p class="mb-10 text-gray-500 font-bold">Part time • Remotly</p>
<a class="flex items-center text-blue-500 hover:text-blue-600" href="#">
<span class="mr-0.5 font-black">Apply Now</span>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.6805 3.5465L8.82049 5.6865L10.1338 6.99317C10.6872 7.5465 10.6872 8.4465 10.1338 8.99983L6.6805 12.4532C6.22716 12.9065 5.45383 12.5798 5.45383 11.9465V8.2065V4.05317C5.45383 3.41317 6.22716 3.09317 6.6805 3.5465Z" fill="currentColor"></path>
</svg>
</a>
</div>
<div class="w-full md:w-1/2 p-2">
<p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
</div>
</div>
</div>
</div>
</div>
<div x-show="category == 'design'" class="flex flex-wrap -m-3">
<div class="w-full p-3">
<div class="p-10 bg-gray-900 rounded-3xl">
<div class="flex flex-wrap -m-2">
<div class="w-full md:w-1/2 p-2">
<h2 class="font-heading mb-2 text-3xl text-gray-50 font-black tracking-tight">Senior Product Designer</h2>
<p class="mb-10 text-gray-500 font-bold">Part time • Remotly</p>
<a class="flex items-center text-blue-500 hover:text-blue-600" href="#">
<span class="mr-0.5 font-black">Apply Now</span>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.6805 3.5465L8.82049 5.6865L10.1338 6.99317C10.6872 7.5465 10.6872 8.4465 10.1338 8.99983L6.6805 12.4532C6.22716 12.9065 5.45383 12.5798 5.45383 11.9465V8.2065V4.05317C5.45383 3.41317 6.22716 3.09317 6.6805 3.5465Z" fill="currentColor"></path>
</svg>
</a>
</div>
<div class="w-full md:w-1/2 p-2">
<p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
</div>
</div>
</div>
</div>
<div class="w-full p-3">
<div class="p-10 bg-gray-900 rounded-3xl">
<div class="flex flex-wrap -m-2">
<div class="w-full md:w-1/2 p-2">
<h2 class="font-heading mb-2 text-3xl text-gray-50 font-black tracking-tight">Creative Director</h2>
<p class="mb-10 text-gray-500 font-bold">Part time • Remotly</p>
<a class="flex items-center text-blue-500 hover:text-blue-600" href="#">
<span class="mr-0.5 font-black">Apply Now</span>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.6805 3.5465L8.82049 5.6865L10.1338 6.99317C10.6872 7.5465 10.6872 8.4465 10.1338 8.99983L6.6805 12.4532C6.22716 12.9065 5.45383 12.5798 5.45383 11.9465V8.2065V4.05317C5.45383 3.41317 6.22716 3.09317 6.6805 3.5465Z" fill="currentColor"></path>
</svg>
</a>
</div>
<div class="w-full md:w-1/2 p-2">
<p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
</div>
</div>
</div>
</div>
<div class="w-full p-3">
<div class="p-10 bg-gray-900 rounded-3xl">
<div class="flex flex-wrap -m-2">
<div class="w-full md:w-1/2 p-2">
<h2 class="font-heading mb-2 text-3xl text-gray-50 font-black tracking-tight">UI/UX Designer</h2>
<p class="mb-10 text-gray-500 font-bold">Part time • Remotly</p>
<a class="flex items-center text-blue-500 hover:text-blue-600" href="#">
<span class="mr-0.5 font-black">Apply Now</span>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.6805 3.5465L8.82049 5.6865L10.1338 6.99317C10.6872 7.5465 10.6872 8.4465 10.1338 8.99983L6.6805 12.4532C6.22716 12.9065 5.45383 12.5798 5.45383 11.9465V8.2065V4.05317C5.45383 3.41317 6.22716 3.09317 6.6805 3.5465Z" fill="currentColor"></path>
</svg>
</a>
</div>
<div class="w-full md:w-1/2 p-2">
<p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
</div>
</div>
</div>
</div>
</div>
<div x-show="category == 'development'" class="visibility-item flex flex-wrap -m-3">
<div class="w-full p-3">
<div class="p-10 bg-gray-900 rounded-3xl">
<div class="flex flex-wrap -m-2">
<div class="w-full md:w-1/2 p-2">
<h2 class="font-heading mb-2 text-3xl text-gray-50 font-black tracking-tight">Full-stack Developer</h2>
<p class="mb-10 text-gray-500 font-bold">Part time • Remotly</p>
<a class="flex items-center text-blue-500 hover:text-blue-600" href="#">
<span class="mr-0.5 font-black">Apply Now</span>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.6805 3.5465L8.82049 5.6865L10.1338 6.99317C10.6872 7.5465 10.6872 8.4465 10.1338 8.99983L6.6805 12.4532C6.22716 12.9065 5.45383 12.5798 5.45383 11.9465V8.2065V4.05317C5.45383 3.41317 6.22716 3.09317 6.6805 3.5465Z" fill="currentColor"></path>
</svg>
</a>
</div>
<div class="w-full md:w-1/2 p-2">
<p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
</div>
</div>
</div>
</div>
<div class="w-full p-3">
<div class="p-10 bg-gray-900 rounded-3xl">
<div class="flex flex-wrap -m-2">
<div class="w-full md:w-1/2 p-2">
<h2 class="font-heading mb-2 text-3xl text-gray-50 font-black tracking-tight">Jr. Software Developer</h2>
<p class="mb-10 text-gray-500 font-bold">Part time • Remotly</p>
<a class="flex items-center text-blue-500 hover:text-blue-600" href="#">
<span class="mr-0.5 font-black">Apply Now</span>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.6805 3.5465L8.82049 5.6865L10.1338 6.99317C10.6872 7.5465 10.6872 8.4465 10.1338 8.99983L6.6805 12.4532C6.22716 12.9065 5.45383 12.5798 5.45383 11.9465V8.2065V4.05317C5.45383 3.41317 6.22716 3.09317 6.6805 3.5465Z" fill="currentColor"></path>
</svg>
</a>
</div>
<div class="w-full md:w-1/2 p-2">
<p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
</div>
</div>
</div>
</div>
<div class="w-full p-3">
<div class="p-10 bg-gray-900 rounded-3xl">
<div class="flex flex-wrap -m-2">
<div class="w-full md:w-1/2 p-2">
<h2 class="font-heading mb-2 text-3xl text-gray-50 font-black tracking-tight">Senior Developer</h2>
<p class="mb-10 text-gray-500 font-bold">Part time • Remotly</p>
<a class="flex items-center text-blue-500 hover:text-blue-600" href="#">
<span class="mr-0.5 font-black">Apply Now</span>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.6805 3.5465L8.82049 5.6865L10.1338 6.99317C10.6872 7.5465 10.6872 8.4465 10.1338 8.99983L6.6805 12.4532C6.22716 12.9065 5.45383 12.5798 5.45383 11.9465V8.2065V4.05317C5.45383 3.41317 6.22716 3.09317 6.6805 3.5465Z" fill="currentColor"></path>
</svg>
</a>
</div>
<div class="w-full md:w-1/2 p-2">
<p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
</div>
</div>
</div>
</div>
</div>
<div x-show="category == 'marketing'" class="visibility-item flex flex-wrap -m-3">
<div class="w-full p-3">
<div class="p-10 bg-gray-900 rounded-3xl">
<div class="flex flex-wrap -m-2">
<div class="w-full md:w-1/2 p-2">
<h2 class="font-heading mb-2 text-3xl text-gray-50 font-black tracking-tight">Content/Social Media Manager</h2>
<p class="mb-10 text-gray-500 font-bold">Part time • Remotly</p>
<a class="flex items-center text-blue-500 hover:text-blue-600" href="#">
<span class="mr-0.5 font-black">Apply Now</span>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.6805 3.5465L8.82049 5.6865L10.1338 6.99317C10.6872 7.5465 10.6872 8.4465 10.1338 8.99983L6.6805 12.4532C6.22716 12.9065 5.45383 12.5798 5.45383 11.9465V8.2065V4.05317C5.45383 3.41317 6.22716 3.09317 6.6805 3.5465Z" fill="currentColor"></path>
</svg>
</a>
</div>
<div class="w-full md:w-1/2 p-2">
<p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
</div>
</div>
</div>
</div>
<div class="w-full p-3">
<div class="p-10 bg-gray-900 rounded-3xl">
<div class="flex flex-wrap -m-2">
<div class="w-full md:w-1/2 p-2">
<h2 class="font-heading mb-2 text-3xl text-gray-50 font-black tracking-tight">Digital Marketing Manager</h2>
<p class="mb-10 text-gray-500 font-bold">Part time • Remotly</p>
<a class="flex items-center text-blue-500 hover:text-blue-600" href="#">
<span class="mr-0.5 font-black">Apply Now</span>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.6805 3.5465L8.82049 5.6865L10.1338 6.99317C10.6872 7.5465 10.6872 8.4465 10.1338 8.99983L6.6805 12.4532C6.22716 12.9065 5.45383 12.5798 5.45383 11.9465V8.2065V4.05317C5.45383 3.41317 6.22716 3.09317 6.6805 3.5465Z" fill="currentColor"></path>
</svg>
</a>
</div>
<div class="w-full md:w-1/2 p-2">
<p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
</div>
</div>
</div>
</div>
<div class="w-full p-3">
<div class="p-10 bg-gray-900 rounded-3xl">
<div class="flex flex-wrap -m-2">
<div class="w-full md:w-1/2 p-2">
<h2 class="font-heading mb-2 text-3xl text-gray-50 font-black tracking-tight">Content Marketing Specialist</h2>
<p class="mb-10 text-gray-500 font-bold">Part time • Remotly</p>
<a class="flex items-center text-blue-500 hover:text-blue-600" href="#">
<span class="mr-0.5 font-black">Apply Now</span>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.6805 3.5465L8.82049 5.6865L10.1338 6.99317C10.6872 7.5465 10.6872 8.4465 10.1338 8.99983L6.6805 12.4532C6.22716 12.9065 5.45383 12.5798 5.45383 11.9465V8.2065V4.05317C5.45383 3.41317 6.22716 3.09317 6.6805 3.5465Z" fill="currentColor"></path>
</svg>
</a>
</div>
<div class="w-full md:w-1/2 p-2">
<p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Can't find the right component?
Describe it and Shuffle AI builds it in seconds, ready to edit and export.
Free to start
Generate with AI
