Home
Framework
Theme
All
196
Typography
14
Sidebars
6
Navbars
13
Tables
8
Components
7
Cards
17
Cards Section
7
Projects Section
3
Teams Section
3
Profiles Section
5
Tables Section
3
Charts
7
Forms
7
Charts Section
3
Testimonials
7
Contents
6
Headers
11
Http Codes
4
Logo Areas
6
Contact Us
6
Stats
6
Authentication
5
Pricing
6
Faq
6
Teams
7
Features
6
Call To Actions
8
Blogs
2
Tailwind Contents
Discover 6 Tailwind Contents available in Loopple
How It Works With Image On Right
How It Works With Center Aligned Steppers
How It Works With Steps Instructions
How It Works Section With Image
<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">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">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">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">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">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><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">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">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">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">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">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>
