Tailwind Call To Actions - Motion Landing Library

Discover 8 Tailwind Call To Actions available in Motion Landing Library

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>