Home
isolde
Call to action banner

Call to action banner

This tailwind example is contributed by isolde, on 04-Dec-2023. 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 isolde

5.2k

Fork Fullscreen

<div class="relative flex-1 bg-blue-600 px-5 py-24 lg:px-8">
  <div class="mx-auto max-w-3xl text-center">
    <h2 class="text-center text-4xl font-bold leading-tight text-white md:text-5xl">Automate customer support in under
      2 weeks</h2>
    <div class="mt-10 flex flex-col items-center justify-center space-y-5 sm:flex-row sm:gap-x-6 sm:space-y-0">
      <a href="/" target="_blank" rel="nofollow noreferrer"
        class="w-full rounded-3xl border border-gray-900 bg-gray-900 px-7 py-3 text-center text-base font-bold text-white transition-colors duration-150 ease-in-out hover:border-gray-800 hover:bg-gray-800 sm:w-auto sm:border-2">Get
        a demo</a>
      <a class="relative inline-flex w-full items-center justify-center rounded-3xl border border-white px-7 py-3 sm:w-auto sm:border-2"
        href="/pricing">
        <p class="text-base font-bold text-white">Get started</p>
        <span class="absolute inset-0 z-0 overflow-hidden rounded-3xl opacity-0 transition-colors duration-150 ease-in-out hover:bg-[#f5f7fc] hover:opacity-5"></span>
      </a>
    </div>
  </div>
</div>

Related Examples

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

Author:
Bunny

2 years ago

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

Author:
Anonymous

2 years ago

19.3k
Hero Section
Responsive Hero Section for you Project Background Image: A stunning, high-quality Unsplash photo that creates a unique visual impact. Overlay: Semi-transparent black overlay with blur effect for readability and a modern aesthetic. Content Area: Centered with a gradient background overlay for contrast, bold headline, engaging subtext. Buttons: Vibrant gradient and clean border with smooth hover animations to draw attention. Responsive Design: Looks great on all screen sizes with adaptable padding and font sizes.

Author:
KULDEEP

3 months ago

908
Sign In Form
Clean and modern Sign In form with email, password, and "Forgot password" link. Fully responsive and styled with Tailwind CSS, perfect for SaaS platforms.

Author:
Lekhraj Ghimire

3 months ago

245
Highlighted Important section with button

Author:
Amit Pachange

2 years ago

9.2k
Get the app section
Play store and App store buttons

Author:
Sophia Baker

2 years ago

9.5k
Take a Survey CTA section

Author:
JaxStone

2 years ago

10.8k
Minimal CTA section

Author:
Laurits

2 years ago

9.1k
Landing page hero section UI
Modern Hero Section Design

Author:
UI-Templates

20 hours ago

21
Jumbotron card

Author:
Sienna

2 years ago

11.5k
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!

Author:
Abdul Baset Bappy

6 months ago

1.1k
Call to Action (for app stores)
Download app section with Playstore and Appstore button

Author:
Ron Hicks

3 years ago

11.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components