Contents - All Examples

Discover 18 Contents examples available in Loopple

How It Works Section With Image

Component from Motion Landing Library React Builder

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