Responsive Feature Section Using Tailwind UI
Explore our versatile feature section where alternating images and descriptions captivate your attention, crafted with seamless design using Tailwind CSS. Inspired design by Frazer Sparham from dribbble.
section
Loading component...
94 lines
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
rel="stylesheet">
<style>
.body {
font-family: 'Plus Jakarta Sans', sans-serif;
}
</style>
<section class="text-gray-600 body-font">
<div class="container px-5 py-24 mx-auto space-y-24">
<div class="flex flex-col items-center justify-between mx-auto border-gray-200 sm:flex-row">
<div class="w-full p-4 sm:w-1/2">
<img class="object-cover mx-auto w-96 h-96"
src="https://images.unsplash.com/photo-1554224155-6726b3ff858f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1011&q=80"
alt="manage money">
</div>
<div class="w-full p-4 mt-6 text-center sm:w-1/2 sm:text-left sm:mt-0">
<div
class="inline-flex items-center justify-center flex-shrink-0 w-20 h-20 mb-4 text-green-500 bg-green-100 rounded-full sm:mr-10">
<svg class="w-12 h-12 text-green-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M12.0049 22.0029C6.48204 22.0029 2.00488 17.5258 2.00488 12.0029C2.00488 6.48008 6.48204 2.00293 12.0049 2.00293C17.5277 2.00293 22.0049 6.48008 22.0049 12.0029C22.0049 17.5258 17.5277 22.0029 12.0049 22.0029ZM12.0049 20.0029C16.4232 20.0029 20.0049 16.4212 20.0049 12.0029C20.0049 7.58465 16.4232 4.00293 12.0049 4.00293C7.5866 4.00293 4.00488 7.58465 4.00488 12.0029C4.00488 16.4212 7.5866 20.0029 12.0049 20.0029ZM8.50488 14.0029H14.0049C14.281 14.0029 14.5049 13.7791 14.5049 13.5029C14.5049 13.2268 14.281 13.0029 14.0049 13.0029H10.0049C8.62417 13.0029 7.50488 11.8836 7.50488 10.5029C7.50488 9.12222 8.62417 8.00293 10.0049 8.00293H11.0049V6.00293H13.0049V8.00293H15.5049V10.0029H10.0049C9.72874 10.0029 9.50488 10.2268 9.50488 10.5029C9.50488 10.7791 9.72874 11.0029 10.0049 11.0029H14.0049C15.3856 11.0029 16.5049 12.1222 16.5049 13.5029C16.5049 14.8836 15.3856 16.0029 14.0049 16.0029H13.0049V18.0029H11.0049V16.0029H8.50488V14.0029Z">
</path>
</svg>
</div>
<h2 class="mb-2 text-2xl font-semibold text-gray-900 title-font">Start making money instantly</h2>
<p class="text-sm leading-relaxed lg:pr-36">Putting you in charge of your earning whist making a difference.
Earn more while giving more componinship to your community.</p>
<a
class="mt-3 px-4 py-2.5 bg-green-500 text-green-50 cursor-pointer inline-flex items-center hover:bg-green-800 hover:text-white">Get
Started
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
class="w-4 h-4 ml-2 stroke-current" viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</a>
</div>
</div>
<div class="flex flex-col-reverse items-center justify-center mx-auto border-gray-200 sm:flex-row">
<div class="flex flex-col justify-center w-full p-4 mt-6 text-center sm:w-1/2 sm:text-left sm:mt-0 ">
<div class="flex justify-center w-full sm:justify-end">
<div
class="flex items-center justify-center flex-shrink-0 w-20 h-20 mb-4 text-green-500 bg-green-100 rounded-full sm:ml-10">
<svg class="w-12 h-12 text-green-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11 2C15.968 2 20 6.032 20 11C20 15.968 15.968 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2ZM11 18C14.8675 18 18 14.8675 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18ZM19.4853 18.0711L22.3137 20.8995L20.8995 22.3137L18.0711 19.4853L19.4853 18.0711Z"></path></svg>
</div>
</div>
<h2 class="mb-2 text-2xl font-semibold text-gray-900 title-font sm:text-end">Find jobs in your local area</h2>
<p class="text-sm leading-relaxed lg:pl-36 sm:text-end">Automated Maps & calender invites getting you to visits easily, and helping you to manage you contact your clients whitin the platforms.</p>
<div class="flex justify-center w-full sm:justify-end">
<a
class="mt-3 px-4 py-2.5 bg-green-500 text-green-50 cursor-pointer flex items-center hover:bg-green-800 hover:text-white">Get
Started
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
class="w-4 h-4 ml-2 stroke-current" viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</a>
</div>
</div>
<div class="w-full p-4 sm:w-1/2">
<img class="object-cover mx-auto w-96 h-96"
src="https://images.unsplash.com/photo-1554224155-6726b3ff858f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1011&q=80"
alt="manage money">
</div>
</div>
<div class="flex flex-col items-center justify-between mx-auto border-gray-200 sm:flex-row">
<div class="w-full p-4 sm:w-1/2">
<img class="object-cover mx-auto w-96 h-96"
src="https://images.unsplash.com/photo-1554224155-6726b3ff858f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1011&q=80"
alt="manage money">
</div>
<div class="w-full p-4 mt-6 text-center sm:w-1/2 sm:text-left sm:mt-0">
<div
class="inline-flex items-center justify-center flex-shrink-0 w-20 h-20 mb-4 text-green-500 bg-green-100 rounded-full sm:mr-10">
<svg class="w-12 h-12 text-green-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 1V3H15V1H17V3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H7V1H9ZM20 11H4V19H20V11ZM8 13V15H6V13H8ZM13 13V15H11V13H13ZM18 13V15H16V13H18ZM7 5H4V9H20V5H17V7H15V5H9V7H7V5Z"></path></svg>
</div>
<h2 class="mb-2 text-2xl font-semibold text-gray-900 title-font">Manage your availability through your smart phone app</h2>
<p class="text-sm leading-relaxed lg:pr-36">Giving you back control - you say when you can work - giving you the flexsibility to own your schedule.</p>
<a
class="mt-3 px-4 py-2.5 bg-green-500 text-green-50 cursor-pointer inline-flex items-center hover:bg-green-800 hover:text-white">Get
Started
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
class="w-4 h-4 ml-2 stroke-current" viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</a>
</div>
</div>
</div>
</section>