Tailwind React Call To Actions
Discover 4 Tailwind React Call To Actions available in Loopple
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>
