Home
ABDO-SY
CTA - call to action section

CTA - call to action section

This tailwind example is contributed by ABDO-SY, on 30-Mar-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are CTA,banner

Call to Action

Author ABDO-SY

142

Fork Fullscreen

<section class="dark:bg-gray-800 bg-[#F9F9F9]"><div class="max-w-[1440px] mx-auto flex flex-col lg:flex-row justify-between items-center gap-8 lg:gap-0  px-20 py-10"><div class="w-[500px] text-center lg:text-left order-2 lg:order-1"><h2 class=" dark:text-white text-black text-3xl font-medium font-['Space_Grotesk']">Let’s make things happen</h2><p class=" my-7 dark:text-gray-300 text-black text-lg font-normal font-['Space_Grotesk']">Contact us today to learn more about how our digital marketing services can help your business grow and succeed online.</p><button class="px-9 py-5 dark:bg-white bg-[#191a23] rounded-2xl   text-center dark:text-[#191a23] text-white text-xl font-normal font-['Space_Grotesk'] leading-7">Get your free proposal</button></div><svg width="359" height="395" viewBox="0 0 359 395" class="w-[360px] h-[400px] order-1 lg:order-2" fill="none" xmlns="http://www.w3.org/2000/svg"><path class="stroke-black dark:stroke-white" d="M337.5 198.5C337.5 200.778 336.403 203.052 334.208 205.306C332.012 207.561 328.746 209.76 324.497 211.87C316 216.09 303.672 219.904 288.398 223.113C257.858 229.528 215.644 233.5 169 233.5C122.356 233.5 80.1418 229.528 49.6017 223.113C34.3276 219.904 22.0001 216.09 13.5033 211.87C9.25393 209.76 5.98843 207.561 3.79163 205.306C1.5966 203.052 0.5 200.778 0.5 198.5C0.5 196.222 1.5966 193.948 3.79163 191.694C5.98843 189.439 9.25393 187.24 13.5033 185.13C22.0001 180.91 34.3276 177.096 49.6017 173.887C80.1418 167.472 122.356 163.5 169 163.5C215.644 163.5 257.858 167.472 288.398 173.887C303.672 177.096 316 180.91 324.497 185.13C328.746 187.24 332.012 189.439 334.208 191.694C336.403 193.948 337.5 196.222 337.5 198.5Z"></path><path d="M337.5 223.5C337.5 225.778 336.403 228.052 334.208 230.306C332.012 232.561 328.746 234.76 324.497 236.87C316 241.09 303.672 244.904 288.398 248.113C257.858 254.528 215.644 258.5 169 258.5C122.356 258.5 80.1418 254.528 49.6017 248.113C34.3276 244.904 22.0001 241.09 13.5033 236.87C9.25393 234.76 5.98843 232.561 3.79163 230.306C1.5966 228.052 0.5 225.778 0.5 223.5C0.5 221.222 1.5966 218.948 3.79163 216.694C5.98843 214.439 9.25393 212.24 13.5033 210.13C22.0001 205.91 34.3276 202.096 49.6017 198.887C80.1418 192.472 122.356 188.5 169 188.5C215.644 188.5 257.858 192.472 288.398 198.887C303.672 202.096 316 205.91 324.497 210.13C328.746 212.24 332.012 214.439 334.208 216.694C336.403 218.948 337.5 221.222 337.5 223.5Z" class="stroke-black dark:stroke-white"></path><path d="M337.5 248.5C337.5 250.778 336.403 253.052 334.208 255.306C332.012 257.561 328.746 259.76 324.497 261.87C316 266.09 303.672 269.904 288.398 273.113C257.858 279.528 215.644 283.5 169 283.5C122.356 283.5 80.1418 279.528 49.6017 273.113C34.3276 269.904 22.0001 266.09 13.5033 261.87C9.25393 259.76 5.98843 257.561 3.79163 255.306C1.5966 253.052 0.5 250.778 0.5 248.5C0.5 246.222 1.5966 243.948 3.79163 241.694C5.98843 239.439 9.25393 237.24 13.5033 235.13C22.0001 230.91 34.3276 227.096 49.6017 223.887C80.1418 217.472 122.356 213.5 169 213.5C215.644 213.5 257.858 217.472 288.398 223.887C303.672 227.096 316 230.91 324.497 235.13C328.746 237.24 332.012 239.439 334.208 241.694C336.403 243.948 337.5 246.222 337.5 248.5Z" class="stroke-black dark:stroke-white"></path><path d="M252.343 66.6293L252.511 67.5347L253.179 66.9008L300.311 22.177L272.341 80.823L271.945 81.6542L272.858 81.534L337.276 73.0554L280.177 104.061L279.368 104.5L280.177 104.939L337.276 135.945L272.858 127.466L271.945 127.346L272.341 128.177L300.311 186.823L253.179 142.099L252.511 141.465L252.343 142.371L240.5 206.257L228.657 142.371L228.489 141.465L227.821 142.099L180.689 186.823L208.659 128.177L209.055 127.346L208.142 127.466L143.724 135.945L200.823 104.939L201.632 104.5L200.823 104.061L143.724 73.0554L208.142 81.534L209.055 81.6542L208.659 80.823L180.689 22.177L227.821 66.9008L228.489 67.5347L228.657 66.6293L240.5 2.74317L252.343 66.6293Z" class="stroke-black dark:stroke-white"></path><path d="M277 177L294.789 222.06L341.11 207.874L316.972 249.877L356.944 277.247L309.055 284.563L312.578 332.879L277 300L241.422 332.879L244.945 284.563L197.056 277.247L237.028 249.877L212.89 207.874L259.211 222.06L277 177Z" fill="#D9D9D9"></path><path d="M112.194 306.102L135.134 264L158.258 306.102L200.269 329.134L158.258 352.166L135.134 394.269L112.194 352.166L70 329.134L112.194 306.102Z" fill="#B9FF66"></path><circle cx="152.5" cy="186.5" r="62" class="dark:fill-white dark:stroke-black fill-black stroke-white" fill="black" stroke="black"></circle><ellipse cx="132" cy="173" rx="10" ry="20" class="dark:fill-black fill-white "></ellipse><ellipse cx="173" cy="173" rx="10" ry="20" class="dark:fill-black fill-white "></ellipse></svg></div></section>

Related Examples

Geaux Code CTA Section
CTA with background patterns

Author:
Andrew Weisbeck

8 months ago

936
Minimal CTA section

Author:
Laurits

2 years ago

8.7k
Get it on Google play / App store section

Author:
Rajesh kulkarni

2 years ago

9.2k
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

3 months ago

717
Basic CTA card

Author:
kishan pc

11 months ago

1.8k
Responsive CTA
Tailwind CTA card

Author:
Dika Rahman

1 year ago

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

Author:
Amit Pachange

1 year ago

7.1k
Hero section with call to action buttons

Author:
Prashant

2 years ago

13.6k
Navbar with two CTA buttons

Author:
Juraj

2 months ago

481
Subscribe to our newsletter section

Author:
Conan Hilton

2 years ago

10.5k
Simple Btn animation

Author:
Ranit Saha

3 months ago

832
Modern responsive Newsletter form
Responsive newsletter subscriber form

Author:
Emdadul Islam

10 months ago

1.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components