Call to action

CTA

This tailwind example is contributed by inbarajan P, on 09-Sep-2024. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are CTA,banner

Call to Action

Author inbarajan P

Tailwind v3.4 2.5k 6

Fork Fullscreen

<section class='bg-[#D2D2D2] relative isolate overflow-hidden'>
	<div class="mx-auto md:max-w-6xl max-w-xl px-4 py-4 md:py-8">
		<div class="grid md:grid-cols-2 grid-cols-1 gap-5 lg:gap-12">
			<div class="px-4 py-4">
				<h1 class='md:text-4xl text-xl font-Poppins text-black font-bold leading-6 tracking-wide'>Lorem ipsum
					dolor sit amet consectetur</h1>
				<p class='font-Poppins mt-3 md:mt-6 text-sm leading-6 tracking-wide text-black font-medium'>Lorem ipsum
					dolor sit amet consectetur, adipisicing elit. Odio possimus explicabo provident tenetur? Nobis,
					officia? Quas qui repudiandae eum, assumenda non asperiores excepturi ratione illo, optio hic
					molestiae exercitationem porro!
				</p>
			</div>

<div class="px-4 py-4 md:pt-5 max-w-md">
				<form class='space-y-4'>
					<div class="relative">
						<input type='email' id='email' name='email' placeholder='Email' class='rounded-xl px-3 py-2.5 placeholder:font-Poppins placeholder:text-xs leading-6 tracking-wide font-Poppins  text-black text-xs focus:outline-none focus:ring-0 w-full focus:shadow-custom-white focus:shadow-gray-600 shadow-md transition-all duration-500 ease-in-out' />
						<div class="absolute inset-y-0 top-0 end-0 grid place-content-center px-2 pointer-events-none">
							<svg class='size-5' viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path
									d="M47.4011 22.8697C47.4364 23.8632 48.2704 24.6399 49.264 24.6045C50.2574 24.5692 51.0343 23.7351 50.9987 22.7416L47.4011 22.8697ZM38.9135 13.2057V15.0057C38.9337 15.0057 38.9536 15.0053 38.9738 15.0047L38.9135 13.2057ZM23.4863 13.2057L23.4262 15.0047C23.4463 15.0053 23.4663 15.0057 23.4863 15.0057V13.2057ZM11.4011 22.7416C11.3657 23.7351 12.1424 24.5692 13.1359 24.6045C14.1294 24.6399 14.9634 23.8632 14.9988 22.8697L11.4011 22.7416ZM50.9999 22.8057C50.9999 21.8116 50.194 21.0057 49.1999 21.0057C48.2059 21.0057 47.3999 21.8116 47.3999 22.8057H50.9999ZM49.1999 37.2058L50.9987 37.2696C50.9995 37.2485 50.9999 37.2271 50.9999 37.2058H49.1999ZM38.9135 46.8058L38.9738 45.0067C38.9536 45.006 38.9337 45.0058 38.9135 45.0058V46.8058ZM23.4863 46.8058V45.0058C23.4663 45.0058 23.4463 45.006 23.4262 45.0067L23.4863 46.8058ZM13.1999 37.2058H11.3999C11.3999 37.2271 11.4003 37.2485 11.4011 37.2696L13.1999 37.2058ZM14.9999 22.8057C14.9999 21.8116 14.1941 21.0057 13.1999 21.0057C12.2058 21.0057 11.3999 21.8116 11.3999 22.8057H14.9999ZM50.1079 24.3599C50.9663 23.8585 51.2555 22.7561 50.7542 21.8978C50.2528 21.0394 49.1505 20.75 48.292 21.2514L50.1079 24.3599ZM36.5663 30.1858L35.6584 28.6313L35.6435 28.6402L36.5663 30.1858ZM25.8335 30.1858L26.7566 28.6402L26.7415 28.6315L25.8335 30.1858ZM14.1079 21.2514C13.2495 20.75 12.1471 21.0394 11.6457 21.8978C11.1443 22.7561 11.4336 23.8585 12.292 24.3599L14.1079 21.2514ZM50.9987 22.7416C50.7681 16.2609 45.3347 11.1901 38.8533 11.4067L38.9738 15.0047C43.4709 14.8544 47.2411 18.3729 47.4011 22.8697L50.9987 22.7416ZM38.9135 11.4057H23.4863V15.0057H38.9135V11.4057ZM23.5465 11.4067C17.0652 11.1901 11.6319 16.2609 11.4011 22.7416L14.9988 22.8697C15.1589 18.3729 18.929 14.8544 23.4262 15.0047L23.5465 11.4067ZM47.3999 22.8057V37.2058H50.9999V22.8057H47.3999ZM47.4011 37.1417C47.2411 41.6386 43.4709 45.157 38.9738 45.0067L38.8533 48.6046C45.3347 48.8213 50.7681 43.7506 50.9987 37.2696L47.4011 37.1417ZM38.9135 45.0058H23.4863V48.6058H38.9135V45.0058ZM23.4262 45.0067C18.929 45.157 15.1589 41.6386 14.9988 37.1417L11.4011 37.2696C11.6319 43.7506 17.0652 48.8213 23.5465 48.6046L23.4262 45.0067ZM14.9999 37.2058V22.8057H11.3999V37.2058H14.9999ZM48.292 21.2514L35.6584 28.6313L37.4743 31.74L50.1079 24.3599L48.292 21.2514ZM35.6435 28.6402C32.9066 30.2748 29.4935 30.2748 26.7566 28.6402L24.9107 31.7311C28.7843 34.0445 33.6155 34.0445 37.4891 31.7311L35.6435 28.6402ZM26.7415 28.6315L14.1079 21.2514L12.292 24.3599L24.9256 31.74L26.7415 28.6315Z"
									fill="black" />
							</svg>
						</div>
					</div>
					<button type='submit' class='capitalize hover:shadow-custom-white hover:shadow-gray-500 shadow-sm transition-all duration-300 ease-in-out font-medium lg:w-1/2 inline-flex gap-2 justify-center items-center active:translate-y-[6px] w-full  bg-[#002CBF] rounded-xl px-2 py-3 text-white text-sm font-Poppins leading-6 tracking-wide'>
                                    subscribe
                                    <svg class='size-4' viewBox="0 0 43 43" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M5.25516 14.5952C1.76076 20.3576 17.1664 25.532 17.1664 25.532C17.1664 25.532 22.3409 40.9376 28.1033 37.4432C34.2185 33.7136 41.5433 10.7984 36.7049 5.99359C31.8665 1.18879 8.98477 8.47997 5.25516 14.5952Z" stroke="white" strokeWidth="3.6" strokeLinecap="round" strokeLinejoin="round" />
                                        <path d="M26.8758 15.8216L17.1654 25.532" stroke="white" strokeWidth="3.6" strokeLinecap="round" strokeLinejoin="round" />
                                    </svg>
                                </button>
				</form>
			</div>
		</div>
	</div>
</section>

Related Examples

Geaux Code CTA Section
CTA with background patterns

Andrew Weisbeck

2 years ago

2.7k
Call to Action (for app stores)
Download app section with Playstore and Appstore button

Ron Hicks

4 years ago

12.3k
Call to action

Leon Bachmann

3 years ago

10.4k
Hero section with a gradient background
With text overlay, and a call-to-action button

Anonymous

3 years ago

21.2k
Simple Btn animation

Ranit Saha

1 year ago

2.3k
Chat Box for Marketing
An Onyx component. This chat box is great for SAAS landing pages where you want to mock customer interactions or expectations.

Coastal UI

2 years ago

2.7k
CTA block for "Take our survey"
Get users attention to he survey form

Prajwal Hallale

3 years ago

9.7k
CTA card with gradient background
Grab users attention using this eye catching CTA card

Emre Yılmaz

2 years ago

4.6k
Call to action block

Sienna

3 years ago

12.4k
Navbar with two CTA buttons

Juraj

1 year ago

2.3k
Beautiful CTA w/ large buttons
This CTA card also has a features list

Carla Hoffman

2 years ago

3.2k
E-Commerce Delivery Truck Animation
This responsive CSS animation showcases a delivery bus transporting a package to its destination, created entirely with Tailwind CSS and pure HTML. The animation features

Bonimater

1 year ago

1.6k