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>

How It Works With Center Aligned Steppers

How It Works With Simple Arrows For Steps

How It Works With Vertical Stepper

How It Works With Steps Instructions

How It Works With Image On Right