UI Components Library

Discover 689 components available in Loopple’s library! Create modern templates without creativity of a designer

Requires JavaScript

Testimonial Section Horizontal

Component from Motion Landing Library Builder

PRO Component

How It Works With Center Aligned Steppers

Component from Motion Landing Library Builder

PRO Component

Call To Action With Text And Subscribe Input

Component from Motion Landing Library Builder

<div class="container mx-auto draggable">
    <div class="flex flex-col items-center justify-center w-full h-full my-auto text-center">
      <h2 class="w-full mb-4 text-4xl font-extrabold leading-tight text-dark-grey-900 font-display">Unlock Motion's Immediate Benefits</h2>
      <p class="mb-10 text-lg font-normal lg:w-6/12 text-grey-700">Experience Motion like never before with instant access. Our platform offers unparalleled features and advantages to elevate your experience.</p>
      <div class="flex flex-col items-center justify-center w-full gap-4 mb-4 md:flex-row">
        <div class="relative flex items-center">
          <span class="absolute ml-3">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-grey-700">
              <path stroke-linecap="round" d="M16.5 12a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 10-2.636 6.364M16.5 12V8.25" />
            </svg>

          </span>
          <input type="search" placeholder="E-mail address" class="flex items-center py-2 pl-10 pr-3 text-sm font-medium border border-solid outline-none grow placeholder:text-dark-grey-500 placeholder:text-sm placeholder:font-medium border-grey-500 focus:border-grey-600 text-dark-grey-900 rounded-xl">
        </div>
        <button class="flex items-center px-4 py-2 text-sm font-bold text-white border rounded-xl border-purple-blue-500 bg-purple-blue-500 hover:bg-purple-blue-600 focus:ring-4 focus:ring-purple-blue-100 transition duration-300">Get Free Access</button>
      </div>
    </div>
  </div>

Pricing Section With Testimonial On The Left

Component from Motion Landing Library Builder

PRO Component

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>