Home
Matti
Component-[callToAction]

Component-[callToAction]

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

Call to Action

Author Matti

947

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

Simple Btn animation

Author:
Ranit Saha

11 months ago

1.8k
Drinkware landing page

Author:
Maxim

9 months ago

1.3k
Animated Text Rotator | Smooth Tailwindcss Text Transition Effects
Beautiful animated text rotation component with smooth fade transitions. Perfect for hero sections, showcasing features, and engaging website visitors with dynamic content.

Author:
Homayoun

1 month ago

126
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

9 months ago

1.4k
Clean CTA section

Author:
Pixel Perfect

1 year ago

3.8k
Product review card

Author:
Moriba Traore

2 years ago

15.2k
Call-to-Action Card
Early Access Signup Card

Author:
Santiago Hernandez

1 year ago

1.9k
Free Animated Gradient Glow Button with Tailwind CSS
A modern, responsive Tailwind CSS button with glowing gradient hover effects, smooth animations, and an integrated SVG icon. Perfect for landing pages, call-to-action buttons, or any stylish UI project. Fully customizable and open source , ready to copy, paste, and use in your projects.

Author:
Homayoun

3 months ago

199
Landing page hero section UI
Modern Hero Section Design

Author:
UI-Templates

2 months ago

328
YouTube subscription section

Author:
Leif99

2 years ago

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

Author:
Sophia Baker

2 years ago

9.6k
Modern CTA section
CTA with background patterns

Author:
Nomthandazo Mhlongo

1 year ago

2.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components