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>

How It Works With Simple Arrows For Steps

How It Works With Steps Instructions

How It Works With Vertical Stepper