Component-[callToAction]

This tailwind example is contributed by Matti, on 05-Dec-2024. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are CTA,banner

Call to Action

Author Matti

Tailwind v3.4 1.4k 2

Fork Fullscreen

<section class="w-full">
  <div class="relative flex flex-col md:flex-row">
    <img class="w-full h-auto hidden md:inline md:h-52 2xl:h-64 md:w-1/4 cursor-pointer hover:contrast-150 transition-all duration-300" src="https://images.unsplash.com/photo-1671726805768-93b4c260766b?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" title="" alt="" />
    <img class="w-full h-auto hidden md:inline md:h-52 2xl:h-64 md:w-1/4 cursor-pointer hover:contrast-150 transition-all duration-300" src="https://images.unsplash.com/photo-1664575599618-8f6bd76fc670?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" title="" alt="" />
    <img class="w-full h-auto hidden md:inline md:h-52 2xl:h-64 md:w-1/4 cursor-pointer hover:contrast-150 transition-all duration-300" src="https://images.unsplash.com/photo-1640622843377-6b5af9417e70?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" title="" alt="" />
    <img class="w-full h-auto md:h-52 2xl:h-64 md:w-1/4 cursor-pointer hover:contrast-150 transition-all duration-300" src="https://images.unsplash.com/photo-1671726805766-07bd41c8ebcf?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" title="" alt="" />
  </div>
  <div class="w-full bg-emerald-500 py-6 md:py-1">
      <div class="w-max-3/4 mx-auto sm:4/5 md:w-3/4 lg:w-3/5 py-3 md:py-8 c-py-4 mx-auto flex flex-col md:flex-row items-center justify-items-center">
        <div class="basis-2/12 xl:basis-1/12">
          <img src="https://cdn.iconscout.com/icon/free/png-512/free-citroen-logo-icon-download-in-svg-png-gif-file-formats--company-brand-automotive-pack-logos-icons-2874693.png" title="" alt="" class="w-auto h-24" />
        </div>
        <div class="w-max-3/4 mx-auto sm:3/4 md:w-3/6 lg:w-3/4 c-w-3xl-66 text-center md:!text-start sm:pl-8 flex flex-col py-6">
          <h1 class="font-semibold text-4xl text-white uppercase">Learning by doing</h1>
          <p class="text-xl md:text-xl 2xl:text-3xl text-white mt-2">Try it always for an hour and you will get great </p>
        </div>
        <div class="w-max-1/6 mx-auto md:w-auto text-center text-xl font-semibold text-white py-2 px-8 cursor-pointer md:!text-start border-2 border-white rounded-md hover:bg-white hover:!text-emerald-500 transition-all duration-300">
          <button>Click to start</button>
        </div>
      </div>
  </div>
</sector>

Related Examples

animated nav
animated nav

Bonimater

1 year ago

862
Hero section with image

Sophia Baker

3 years ago

13.9k
Modern responsive Newsletter form
Responsive newsletter subscriber form

Emdadul Islam

2 years ago

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

S. Patel

3 years ago

8.5k
ArtoGallery
Explore a curated selection of contemporary and classic artwork, connecting collectors and creators in an inspiring online space.

ORGIN_DREAMS

1 year ago

2k
Animated Call-to-Action Section
Enhance your website with this , animated CTA section. Includes a gradient text animations, and a stylish avatar group. Easily customizable and designed to improve user engagement. Get the source code now.

Homayoun

11 months ago

678
Geaux Code CTA Section
CTA with background patterns

Andrew Weisbeck

2 years ago

2.6k
e-commerce website landing page template with Tailwind CSS.
A clean, responsive e-commerce & blog template built with Tailwind CSS. Features light/dark mode, dynamic featured posts, hero, CTA, and SEO-ready sections.

Homayoun

8 months ago

1.2k
CTA with image

Fagundo67

3 years ago

10.4k
Registration Form with Validation & Success State
A modern and interactive registration form built using Tailwind CSS and Alpine.js, designed for seamless user onboarding with real-time validation and elegant animations. This component includes client-side form validation, dynamic password visibility toggles, and a success confirmation screen with personalized feedback. It’s fully responsive, dark mode–ready, and styled for modern SaaS or startup platforms. ✨ Key Features 🧠 Real-time input validation for required fields (name, email, password, etc.) 🔒 Show/hide password toggle with animated SVG icons ✅ Success message with user details after submission 💨 Animated transitions using Alpine.js 🌙 Dark mode and light mode compatible 📱 Fully responsive across all screen sizes 🧩 Built with pure Tailwind CSS and Alpine.js (no external libraries) 💡 Perfect for: Registration or sign-up pages SaaS onboarding flows Portfolio or agency login systems Form validation demos or UI component libraries

wavy kits

11 months ago

672
REGISTER - CTA - SECTION animation

ABDO-SY

1 year ago

1.1k
Navbar with two CTA buttons

Juraj

1 year ago

2.3k