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 5

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

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

Anonymous

3 years ago

21.2k
carde Iptplus
Iptplus carde

Omer fils ELENGA

10 months ago

429
SaaS Feature Section
It has a Gradient text headline and CTA buttons

Junclarkaizen Pagu

3 years ago

10.1k
CTA section with floating icos as background

EliteAI Tools

1 year ago

1.7k
CTA block
with user avatars and 2 buttons

Carla Hoffman

2 years ago

3.2k
Responsive About Section with Tailwind CSS
Built a sleek and fully responsive About Section for my portfolio using Tailwind CSS! 🚀 Designed for smooth adaptability across all screen sizes with a modern and minimal aesthetic. Perfect for showcasing skills, experience, and a personal touch!

Abdul Baset Bappy

1 year ago

2k
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Ameth Galarcio

2 years ago

4.2k
Simple CTA card

Santos78

3 years ago

14.1k
The Future of Web Development
love my product

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.5k
Get Started ,Membership section - responsive - darkMode

ABDO-SY

1 year ago

1.5k
Greeting Card with CTA
card with two actions with greeting msg according to time

Amit Pachange

3 years ago

8.4k
Hero Section
Responsive Hero Section for you Project Background Image: A stunning, high-quality Unsplash photo that creates a unique visual impact. Overlay: Semi-transparent black overlay with blur effect for readability and a modern aesthetic. Content Area: Centered with a gradient background overlay for contrast, bold headline, engaging subtext. Buttons: Vibrant gradient and clean border with smooth hover animations to draw attention. Responsive Design: Looks great on all screen sizes with adaptable padding and font sizes.

KULDEEP

1 year ago

2.5k