Home
inbarajan P
Call to action

Call to action

CTA

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

Call to Action

Author inbarajan P

1.6k

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

Applications Showcase
This is a stylish and interactive application showcase component designed for web use. It features the following elements: Background Styling: The main container has a rounded-rectangle shape (rounded-3xl) with a subtle white base overlaying a high-resolution background image, styled with background-size: 600px for an artistic touch. The image itself dynamically serves as a backdrop, giving the component a layered appearance. Main Icon: A small circular icon, located at the top-right corner, appears with smooth hover effects: Enlarges to double its size (scale-[2]). Rotates (rotate-[410deg]). Moves diagonally upwards-right (translate-x-3, -translate-y-3). These transitions occur over a duration of 1 second (transition duration-1000). Overlay Gradient: A transparent gradient overlay (bg-gradient-to-l) adds a polished depth effect, transitioning from black (from-black/80) to lighter shades. App Icon and Info: Icon: The app icon is a smaller, bordered square image (rounded-2xl) with hover shrink animations (group-hover:scale-95). Text: A bold application title (text-md font-semibold) with hover-animated underline effects that gradually expand from left to right. A short app description styled as secondary text. Call-to-Action Button: Below the card is a subtle, rounded button (rounded-full) encouraging interaction. It features: A hover effect with color inversion (gray to black). A lift effect (hover:-translate-y-1) when hovered. This component is perfect for modern app showcases, offering a dynamic, user-friendly visual experience. It ensures a professional look while engaging users through smooth animations and clear calls to action.

Author:
Banshee

10 months ago

2.4k
Responsive CTA
Tailwind CTA card

Author:
Dika Rahman

1 year ago

2.2k
Call to action component
Start your free 7-day trial Call to action button

Author:
S. Patel

2 years ago

7.8k
Buy Me a Coffee CTA section

Author:
Sienna

2 years ago

9.6k
Bubblegum Button
This interactive button component is designed with a sleek gradient background and smooth hover effects, making it an eye-catching call-to-action element for modern web interfaces. Styling and Features: ✅ Gradient Background & Rounded Shape • The button container has a subtle gradient overlay (bg-gradient-to-tr) that smoothly transitions from soft pink (from-pink-300) to light blue (to-blue-300), giving it a vibrant and modern look. • Wrapped in a rounded-full container for a pill-shaped aesthetic. ✅ Floating & Shadow Effects • The shadow-lg property creates a soft floating effect, enhancing depth and visibility. • Will-change-transform optimizes animations for a seamless hover experience. ✅ Interactive Hover Animations • On hover, the inner button scales up (hover:scale-105) and lifts slightly (hover:-translate-y-2), simulating a press-and-release motion. • The transition is smooth, with a 500ms animation (transition duration-500). ✅ Content & Icon • The “Learn more” label is paired with a right-arrow icon (svg) for clear visual guidance. • The icon and text are flex-aligned (items-center flex), ensuring a balanced and responsive layout. This button is ideal for call-to-action elements, product highlights, or download prompts, offering a modern, sleek, and engaging user experience. 🚀

Author:
Banshee

9 months ago

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

Author:
Prajwal Hallale

2 years ago

9.6k
Product Page
Showcase for the product.

Author:
muhamadrofii911

1 year ago

2.2k
Call to Action with Background image

Author:
Monica D.

1 year ago

1.9k
Product hunt showcase section

Author:
Leon Bachmann

2 years ago

10k
Modern CTA section
CTA banner

Author:
Pixel Perfect

1 year ago

1.7k
Call to Action
CTA with Dark and Shadow colors

Author:
KULDEEP

4 months ago

562
Simple CTA card

Author:
Santos78

2 years ago

13.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components