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

Call to action section

Leon Bachmann

3 years ago

7.5k
Floating Call Widget
Floating Call Widget - Pure CSS + HTML + JS

Sayista Yazdani

1 day ago

5
carde Iptplus
Iptplus carde

Omer fils ELENGA

10 months ago

429
Promotion Block
It features a large, centered title, a brief description, and a prominent CTA button, all centered within a visually appealing layout.

Computer guy

3 years ago

8.4k
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.5k
Modern Contact Section with Responsive Grid and Glassmorphic Form
A clean, professional contact section with a dual-column layout featuring contact details and a sleek glassmorphism-inspired form. Fully responsive with Tailwind CSS, supporting both light and dark modes.

Muhammad Umair Arshad

1 year ago

1.2k
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
asimple game Quest Log
asimple game lay out Quest Log

Bonimater

1 year ago

1.1k
Floating Action Button
This component displays a fixed, floating contact button panel positioned at the bottom-right corner of the screen. It provides users with quick access to key communication channels including WhatsApp, Email, and Instagram. Each icon is styled with vibrant, platform-specific colors and includes subtle hover animations for an interactive user experience. Ideal for improving accessibility and encouraging user engagement, especially on mobile devices.

Arturo Lizana

1 year ago

2.2k
Call to action section with image

Steven Kuhn

3 years ago

10.9k
bottom drawer with Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

3.3k
Call to action (CTA) section
Modern and clean CTA section

Bunny

3 years ago

12.5k