CTA - call to action section

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

Call to Action

Author ABDO-SY

Tailwind v3.4 1.3k 4

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

Modern CTA section
CTA with background patterns

Nomthandazo Mhlongo

2 years ago

3k
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
Call to Action section
CTA with clear message and big button

Curtis Bickler

1 year ago

2.6k
Product hunt showcase section

Leon Bachmann

3 years ago

10.8k
Call to Action section for home page

Sophia Baker

3 years ago

10.3k
Animated Gradient Button Component
Button component with smooth hover effects and glass-morphism design. Features expanding gradient animation, rotating icon, and responsive layout. Perfect for call-to-action buttons, landing pages, and web applications. Easy copy-paste Tailwind CSS code ready for integration.

Homayoun

11 months ago

1.3k
Call-to-Action Card
Early Access Signup Card

Santiago Hernandez

2 years ago

2.5k
carde Iptplus
Iptplus carde

Omer fils ELENGA

9 months ago

429
Subscribe to our newsletter section

Conan Hilton

4 years ago

12k
Call to action section with image

Emily Tan

3 years ago

12.4k
Clean & Responsive Footer Design with Tailwind CSS With CTA Button
modern and responsive footer built with Tailwind CSS to enhance website navigation, accessibility, and user experience. Featuring quick links, social media icons, copyright info, and a sleek layout, this SEO-friendly footer improves engagement and usability across all devices. Perfect for portfolios, business websites, and eCommerce stores!

Abdul Baset Bappy

1 year ago

1.5k
Join Our Community Banner
Encourage users to become members of a community.

Diego Chavez

2 years ago

9k