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

770

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 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.

Author:
Muhammad Umair Arshad

4 months ago

497
Product review card

Author:
Rama krishnan Subramanian

1 year ago

2.1k
Call to action block

Author:
Sienna

2 years ago

11.7k
Call to Action (CTA) Section

Author:
ariaw

7 months ago

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

Author:
Amit Pachange

2 years ago

7.7k
Responsive CTA

Author:
Lukas Müller

2 years ago

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

Author:
Ameth Galarcio

1 year ago

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

Author:
Junclarkaizen Pagu

2 years ago

9.1k
asimple game lay out
asimple game lay out

Author:
Bonimater

2 months ago

544
Free Animated Gradient Glow Button with Tailwind CSS
A modern, responsive Tailwind CSS button with glowing gradient hover effects, smooth animations, and an integrated SVG icon. Perfect for landing pages, call-to-action buttons, or any stylish UI project. Fully customizable and open source , ready to copy, paste, and use in your projects.

Author:
Homayoun

2 months ago

132
Call to action

Author:
Leon Bachmann

2 years ago

8.5k
Tailwind CTA section

Author:
Moriba Traore

2 years ago

13k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components