Tailwind React Contents - Motion Landing Library React

Discover 2 Tailwind React Contents available in Motion Landing Library React

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 With Steps Instructions