Home
Carla Hoffman
Beautiful CTA w/ large buttons

Beautiful CTA w/ large buttons

This CTA card also has a features list

This tailwind example is contributed by Carla Hoffman, on 07-Mar-2024. 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 Carla Hoffman

2.4k

Fork Fullscreen

<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
  <div class="bg-indigo-700 rounded-3xl p-8 text-center sm:p-16 md:px-24 md:py-20 lg:px-28">
    <div class="max-w-2xl mx-auto">
      <h2 class="font-display text-4xl font-bold tracking-tight text-white sm:text-5xl lg:text-6xl">Ready to explore the
        wonders of AI Translation?
      </h2>
      <p class="max-w-lg text-base text-indigo-100 mx-auto mt-4 sm:text-lg">
        Discover how AI-powered translation can
        enhance your communication across languages in just a few hours.
      </p>
    </div>
    <div class="flex flex-col justify-center gap-4 mt-8 sm:flex-row sm:items-center sm:gap-5">
      <a class="inline-flex items-center justify-center bg-white text-lg font-semibold text-indigo-700 shadow-sm transition-all duration-150 rounded-xl px-8 py-4 hover:bg-indigo-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
        href="/pricing">Start a free trial</a>
      <a class="inline-flex items-center justify-center bg-indigo-700 text-lg font-semibold text-white shadow-sm ring-1 ring-inset ring-white transition-all duration-150 rounded-xl px-8 py-4 hover:bg-indigo-800"
        href="/book-a-demo">Book a demo</a>
    </div>
    <ul class="flex flex-wrap items-center justify-center gap-x-6 gap-y-3 text-sm font-medium text-white mt-8">
      <li class="inline-flex items-center gap-2">
        <svg aria-hidden="true" class="h-5 w-5 shrink-0 text-white" xmlns="http://www.w3.org/2000/svg"
          fill="currentColor" viewBox="0 0 256 256">
          <path
            d="M176.49,95.51a12,12,0,0,1,0,17l-56,56a12,12,0,0,1-17,0l-24-24a12,12,0,1,1,17-17L112,143l47.51-47.52A12,12,0,0,1,176.49,95.51ZM236,128A108,108,0,1,1,128,20,108.12,108.12,0,0,1,236,128Zm-24,0a84,84,0,1,0-84,84A84.09,84.09,0,0,0,212,128Z">
          </path>
        </svg>Optimized translation output
      </li>
      <li class="inline-flex items-center gap-2">
        <svg aria-hidden="true" class="h-5 w-5 shrink-0 text-white" xmlns="http://www.w3.org/2000/svg"
          fill="currentColor" viewBox="0 0 256 256">
          <path
            d="M176.49,95.51a12,12,0,0,1,0,17l-56,56a12,12,0,0,1-17,0l-24-24a12,12,0,1,1,17-17L112,143l47.51-47.52A12,12,0,0,1,176.49,95.51ZM236,128A108,108,0,1,1,128,20,108.12,108.12,0,0,1,236,128Zm-24,0a84,84,0,1,0-84,84A84.09,84.09,0,0,0,212,128Z">
          </path>
        </svg>Seamless integration with existing workflows
      </li>
      <li class="inline-flex items-center gap-2">
        <svg aria-hidden="true" class="h-5 w-5 shrink-0 text-white" xmlns="http://www.w3.org/2000/svg"
          fill="currentColor" viewBox="0 0 256 256">
          <path
            d="M176.49,95.51a12,12,0,0,1,0,17l-56,56a12,12,0,0,1-17,0l-24-24a12,12,0,1,1,17-17L112,143l47.51-47.52A12,12,0,0,1,176.49,95.51ZM236,128A108,108,0,1,1,128,20,108.12,108.12,0,0,1,236,128Zm-24,0a84,84,0,1,0-84,84A84.09,84.09,0,0,0,212,128Z">
          </path>
        </svg>Support for 100+ languages
      </li>
      <li class="inline-flex items-center gap-2">
        <svg aria-hidden="true" class="h-5 w-5 shrink-0 text-white" xmlns="http://www.w3.org/2000/svg"
          fill="currentColor" viewBox="0 0 256 256">
          <path
            d="M176.49,95.51a12,12,0,0,1,0,17l-56,56a12,12,0,0,1-17,0l-24-24a12,12,0,1,1,17-17L112,143l47.51-47.52A12,12,0,0,1,176.49,95.51ZM236,128A108,108,0,1,1,128,20,108.12,108.12,0,0,1,236,128Zm-24,0a84,84,0,1,0-84,84A84.09,84.09,0,0,0,212,128Z">
          </path>
        </svg>Flexible subscription plans
      </li>
      <li class="inline-flex items-center gap-2">
        <svg aria-hidden="true" class="h-5 w-5 shrink-0 text-white" xmlns="http://www.w3.org/2000/svg"
          fill="currentColor" viewBox="0 0 256 256">
          <path
            d="M176.49,95.51a12,12,0,0,1,0,17l-56,56a12,12,0,0,1-17,0l-24-24a12,12,0,1,1,17-17L112,143l47.51-47.52A12,12,0,0,1,176.49,95.51ZM236,128A108,108,0,1,1,128,20,108.12,108.12,0,0,1,236,128Zm-24,0a84,84,0,1,0-84,84A84.09,84.09,0,0,0,212,128Z">
          </path>
        </svg>Effortless cancellation process
      </li>
    </ul>
  </div>
</div>

Related Examples

Responsive CTA

Author:
Lukas Müller

3 years ago

10k
CTA banner
With fading bg gradient

Author:
Lautaro Gómez

1 year ago

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

Author:
Sophia Baker

2 years ago

9.6k
Basic CTA card

Author:
kishan pc

1 year ago

2.3k
Clean & Responsive Footer Design with Tailwind CSS With CTA Button
modern and responsive footer built with Tailwind CSS to enhance website navigation, accessibility, and user experience. Featuring quick links, social media icons, copyright info, and a sleek layout, this SEO-friendly footer improves engagement and usability across all devices. Perfect for portfolios, business websites, and eCommerce stores!

Author:
Abdul Baset Bappy

9 months ago

872
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

6 months ago

604
CTA card with gradient border

Author:
Sameer Sultana

2 years ago

13.9k
Responsive call to action

Author:
Leon Bachmann

2 years ago

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

6 months ago

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

Author:
Bunny

2 years ago

11.9k
Product Page
Showcase for the product.

Author:
Prem..

3 years ago

32.6k
Call to action section with image

Author:
Steven Kuhn

2 years ago

10.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components