Home
Framework
Theme
All
663
Forms
12
Charts
21
Navbars
45
Sidebars
27
Typography
42
Components
51
Tables
34
Cards
70
Contact Us
9
Testimonials
19
Cards Section
37
Features
25
Teams Section
11
Faq
9
Headers
45
Blogs
13
Contacts Section
9
Profiles Section
13
Charts Section
7
Tables Section
15
Contents
18
Logo Areas
12
Projects Section
14
Stats
13
Http Codes
6
Authentication
15
Call To Actions
21
Teams
16
Pricing
13
Contents - All Examples
Discover 18 Contents examples available in Loopple
Contents Digital Agency Landing
Carousel Image In Left And Text In Right
Content With Overlayed Images On Left And Text And Images On Right
Feature With Image In Left Text And Button
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>
