Home
Htmlwind
CTA - Htmlwind

CTA - Htmlwind

Screenshot on dark background

This tailwind example is contributed by Htmlwind, on 02-Jun-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are CTA,banner

Call to Action

Author Htmlwind

842

Fork Fullscreen

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

Related Examples

Call to action

Author:
Sophia Baker

3 years ago

10.8k
SliceHeaven
delivering pizza

Author:
INGRIDE MUZIRANENGE

8 months ago

730
REGISTER - CTA - SECTION animation

Author:
ABDO-SY

9 months ago

680
Very simple hero

Author:
Laurits

3 years ago

9k
Call to action

Author:
Leon Bachmann

3 years ago

9.7k
Hero section with a gradient background
With text overlay, and a call-to-action button

Author:
Anonymous

2 years ago

20.2k
Call to action component
Start your free 7-day trial Call to action button

Author:
S. Patel

2 years ago

8k
Bug Beach Day Heatwave
This playful animation brings sweltering summer insects to life with pure HTML and Tailwind CSS. Watch as: 🔥 Glowing Fireflies pulse with heat-radiant light, their wings shimmering in the desert sun 🐞 Overheated Ladybugs scuttle across cracked earth, their red shells reflecting the blazing heat ☀️ A Wobbling Sun dominates the sky, emitting pulsing heat waves across the animated landscape

Author:
Bonimater

8 months ago

981
CTA Responsive
Gradient Style CTA

Author:
KULDEEP

6 months ago

443
bottom drawer with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2.7k
Subscribe to our newsletter section

Author:
Conan Hilton

3 years ago

11.6k
CTA card with gradient border

Author:
Sameer Sultana

2 years ago

13.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components