Tailwind React Call To Actions - Motion Landing Library React

Discover 4 Tailwind React Call To Actions available in Motion Landing Library React

Call To Action With Text And Subscribe Input

Component from Motion Landing Library React Builder
<div data-type='div' className="container mx-auto draggable">
 <div data-type='div' className="flex flex-col items-center justify-center w-full h-full my-auto text-center">
   <h2 data-type='h2' className="w-full mb-4 text-4xl font-extrabold leading-tight text-dark-grey-900">
      Unlock Motion's Immediate Benefits
    </h2>
    <p data-type='p' className="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 data-type='div' className="flex flex-col items-center justify-center w-full gap-4 mb-4 md:flex-row">
     <div data-type='div' className="relative flex items-center">
       <span data-type='span' className="absolute ml-3">
         <svg data-type='svg'
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            strokeWidth="1.5"
            stroke="currentColor"
            className="w-5 h-5 text-grey-700"
          >
           <path data-type='path'
              strokeLinecap="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 data-type='input'
          type="search"
          placeholder="E-mail address"
          className="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 data-type='button' className="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>

Call To Action With Background Image

Call To Actions With Text And Buttons

Call To Action Section With Subscribe Form