Tailwind React Contents
Discover 2 Tailwind React Contents available in Loopple
How It Works Section With Image
Component from
Motion Landing Library React
Builder
<div data-type='div' className="w-full draggable">
<div data-type='div' className="container flex flex-col items-center gap-16 mx-auto my-32">
<div data-type='div' className="grid w-full grid-cols-1 gap-32 lg:grid-cols-2">
<div data-type='div' className="bg-cover bg-center hidden lg:block rounded-3xl overflow-hidden">
<img data-type='img'
src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/auth-3-bg.jpeg"
className="object-cover"
/>
</div>
<div data-type='div' className="flex flex-col gap-16">
<div data-type='div' className="flex flex-col gap-2 text-center md:text-start">
<h2 data-type='h2' className="text-3xl font-extrabold md:text-4xl lg:text-5xl text-dark-grey-900">
How Motion Works?
</h2>
<p data-type='p' className="text-base font-medium leading-7 text-dark-grey-600">
Motion's operation involves seamlessly integrating various functions
to deliver optimal performance. Our platform is designed to provide
efficient solutions and streamline your experience.
</p>
</div>
<div data-type='div' className="grid w-full grid-cols-1 md:grid-cols-2 gap-y-16 gap-x-10">
<div data-type='div' className="flex flex-col items-start gap-1">
<div data-type='div' className="flex items-center justify-center w-12 h-12 rounded-full bg-purple-blue-500 mb-2 mb-2">
<span data-type='span' className="text-base font-bold leading-7 text-white">
1
</span>
</div>
<h3 data-type='h3' className="text-base font-bold leading-tight text-dark-grey-900">
Exquisite Culinary Creations
</h3>
<p data-type='p' className="text-base font-medium leading-7 text-dark-grey-600">
Explore a world of flavors that will tantalize your taste buds.
</p>
</div>
<div data-type='div' className="flex flex-col items-start gap-1">
<div data-type='div' className="flex items-center justify-center w-12 h-12 rounded-full bg-purple-blue-500 mb-2">
<span data-type='span' className="text-base font-bold leading-7 text-white">
2
</span>
</div>
<h3 data-type='h3' className="text-base font-bold leading-tight text-dark-grey-900">
Seamless Dining Coordination
</h3>
<p data-type='p' className="text-base font-medium leading-7 text-dark-grey-600">
We make sure every culinary journey detail is perfect.
</p>
</div>
<div data-type='div' className="flex flex-col items-start gap-1">
<div data-type='div' className="flex items-center justify-center w-12 h-12 rounded-full bg-purple-blue-500 mb-2">
<span data-type='span' className="text-base font-bold leading-7 text-white">
3
</span>
</div>
<h3 data-type='h3' className="text-base font-bold leading-tight text-dark-grey-900">
Savor the Ambiance
</h3>
<p data-type='p' className="text-base font-medium leading-7 text-dark-grey-600">
Immerse yourself in a captivating dining ambiance.
</p>
</div>
<div data-type='div' className="flex flex-col items-start gap-1">
<div data-type='div' className="flex items-center justify-center w-12 h-12 rounded-full bg-purple-blue-500 mb-2">
<span data-type='span' className="text-base font-bold leading-7 text-white">
4
</span>
</div>
<h3 data-type='h3' className="text-base font-bold leading-tight text-dark-grey-900">
Gourmet Delights
</h3>
<p data-type='p' className="text-base font-medium leading-7 text-dark-grey-600">
Treat your palate to an array of gourmet dishes.
</p>
</div>
</div>
</div>
</div>
</div>
</div>