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

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

Basic CTA card

Author:
kishan pc

7 months ago

1.3k
CTA block
with user avatars and 2 buttons

Author:
Carla Hoffman

8 months ago

1.3k
Call to action card with image
Responsive card with image

Author:
Noah Schmidt

1 year ago

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

Author:
Bunny

1 year ago

10.3k
Simple Multi-Purpose Slider
This is a very minimalistic though very usable slider for various situations like CTA's, quotes or other uncomplicated content. I only used Tailwindcss which makes it very lightweight, but due to limitations it's not as flexible as I wished for. This could be easily achieved by a little piece of JS to make it as dynamic as you wish.

Author:
Hielke Brandsma

1 month ago

342
Newsletter Signup Form
It features a clean and modern design with a background illustration, making it visually appealing.

Author:
TailwindFlex

1 year ago

7k
SaaS Feature Section
It has a Gradient text headline and CTA buttons

Author:
Junclarkaizen Pagu

1 year ago

7.1k
YouTube subscription section

Author:
Leif99

1 year ago

13.2k
Basic CTA
Simple and straightforward call to action section

Author:
Dipti narayan

1 year ago

6.6k
Call to action
Call to action section. find it makecomponents.com

Author:
makecomponents

3 months ago

524
Jumbotron card

Author:
Sienna

1 year ago

9.9k
CTA card with gradient border

Author:
Sameer Sultana

1 year ago

12.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components