Tailwind Contents - Motion Landing Library
Discover 6 Tailwind Contents available in Motion Landing Library
How It Works Section With Image
Component from
Motion Landing Library
Builder
<div class="w-full draggable">
<div class="container flex flex-col items-center gap-16 mx-auto my-32">
<div class="grid w-full grid-cols-1 gap-32 lg:grid-cols-2">
<div class="bg-cover bg-center hidden lg:block rounded-3xl" style="background-image: url('https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/auth-3-bg.jpeg')">
</div>
<div class="flex flex-col gap-16">
<div class="flex flex-col gap-2 text-center md:text-start">
<h2 class="text-3xl font-extrabold md:text-4xl lg:text-5xl text-dark-grey-900 font-display">How Motion Works?</h2>
<p class="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 class="grid w-full grid-cols-1 md:grid-cols-2 gap-y-16 gap-x-10">
<div class="flex flex-col items-start gap-1">
<div class="flex items-center justify-center w-12 h-12 rounded-full bg-purple-blue-500 mb-2 mb-2">
<span class="text-base font-bold leading-7 text-white">1</span>
</div>
<h3 class="text-base font-bold leading-tight text-dark-grey-900 font-display">Exquisite Culinary Creations</h3>
<p class="text-base font-medium leading-7 text-dark-grey-600">Explore a world of flavors that will tantalize your taste buds.</p>
</div>
<div class="flex flex-col items-start gap-1">
<div class="flex items-center justify-center w-12 h-12 rounded-full bg-purple-blue-500 mb-2">
<span class="text-base font-bold leading-7 text-white">2</span>
</div>
<h3 class="text-base font-bold leading-tight text-dark-grey-900 font-display">Seamless Dining Coordination</h3>
<p class="text-base font-medium leading-7 text-dark-grey-600">We make sure every culinary journey detail is perfect.</p>
</div>
<div class="flex flex-col items-start gap-1">
<div class="flex items-center justify-center w-12 h-12 rounded-full bg-purple-blue-500 mb-2">
<span class="text-base font-bold leading-7 text-white">3</span>
</div>
<h3 class="text-base font-bold leading-tight text-dark-grey-900 font-display">Savor the Ambiance</h3>
<p class="text-base font-medium leading-7 text-dark-grey-600">Immerse yourself in a captivating dining ambiance.</p>
</div>
<div class="flex flex-col items-start gap-1">
<div class="flex items-center justify-center w-12 h-12 rounded-full bg-purple-blue-500 mb-2">
<span class="text-base font-bold leading-7 text-white">4</span>
</div>
<h3 class="text-base font-bold leading-tight text-dark-grey-900 font-display">Gourmet Delights</h3>
<p class="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>
