CTA Sections
Ready to use Tailwind CSS CTA Section Components with production-ready, copy-paste HTML code. Use them as they are, or as a starting point to build beautiful websites.
<div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
<div class="relative isolate overflow-clip bg-gray-900 px-6 pt-16 shadow-2xl sm:rounded-3xl sm:px-16 md:pt-24 lg:flex lg:gap-x-20 lg:px-24 lg:pt-0">
<div aria-hidden="true" class="absolute right-0 top-0 -z-10 aspect-square w-full max-w-3xl translate-x-3/4 rounded-full bg-pink-500/60 blur-[10rem] lg:-top-[40rem] lg:left-1/2 lg:-translate-x-1/2"></div>
<div class="mx-auto max-w-md text-center lg:mx-0 lg:flex-auto lg:py-24 lg:text-start">
<h2 class="text-3xl font-semibold tracking-tight text-white sm:text-4xl">Want to partner with design experts in SaaS?</h2>
<p class="mt-6 text-base text-gray-300">We're excited to talk to you about your project requirements and business goals.</p>
<div class="mt-10 flex items-center justify-center gap-x-6 lg:justify-start">
<a href="#" class="rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Schedule a call</a>
<a href="#" class="text-sm font-semibold leading-6 text-white">Send an email</a>
</div>
</div>
<div class="relative mt-16 h-80 lg:mt-8 lg:h-auto">
<img width="1920" height="1139" class="absolute left-0 top-0 w-[58rem] max-w-none rounded-2xl bg-white/5 ring-1 ring-white/10 lg:top-14" src="https://htmlwind.com/assets/images/dark-dashboard-screenshot.webp" alt="dashboard screenshot" />
</div>
</div>
</div>
</div>