Home
makecomponents
Call to action

Call to action

Call to action section. find it makecomponents.com

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

Call to Action

Author makecomponents

1.4k

Fork Fullscreen

<div class=" py-[300px] dark:bg-secondary">
      <section
        class="  relative py-10 bg-[url('https://makecomponents.com/Image/call-to-action/001/001.webp')] h-[300px] bg-no-repeat bg-cover bg-center "
      >
        <div class="absolute w-full bottom-0 mx-auto px-4">
          <div class="  container mx-auto ">
            <div class=" grid lg:grid-cols-3  lge:grid-cols-3 md:grid-cols-1 mdsm:grid-cols-1 sm:grid-cols-1 ">
              <div>
                <div class="lg:block lge:block md:hidden mdsm:hidden sm:hidden ">
                  <img
                    src="https://makecomponents.com/Image/overall/person/person2.webp"
                    alt="person "
                    class="  h-[500px] mx-auto "
                  />
                </div>
              </div>
              <div class=" col-span-2 relative ">
                <div class=" absolute bottom-0 py-10">
                  <h3 class=" text-[#c7b130]  relative after:bg-[#fff] after:w-[10%] text-4xl font-semibold   pb-4">
                    Get a Free Quote
                  </h3>
                  <h4 class=" text-[#fff]  text-[20px] ">
                    Looking for reliable logistics solutions? Get a free,
                    no-obligation quote today and discover how we can
                    streamline your supply chain.
                    <span class=" text-[#c7b130]  underline underline-[#fff] underline-offset-2 ">
                   
                      Request your quote now!
                    </span>
                  </h4>
                  <button class=" bg-[#c7b130]  rounded-lg   py-2 px-16 mt-4 hover:bg-[#fff] ">
                    Call Now
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>

Related Examples

Call to Action (CTA) Section

Author:
ᴀʀ!ᴀ

2 months ago

216
Tailwind CSS Button (Wavy Button)
The button uses Tailwind classes for size, background, border, border-radius, shadow, cursor, overflow, and transitions. The wave overlay is absolutely positioned at the bottom of the button, initially off-screen (top-full) and moves to the middle (top-1/2) on hover via the custom .wave class and keyframes. The font-poppins class isn’t a default Tailwind class. You should define it in your Tailwind configuration or replace it with font-sans if you haven't extended fonts.

Author:
KULDEEP

1 day ago

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

Author:
TailwindFlex

1 year ago

7.5k
Content showing for Call to action

Author:
inbarajan P

9 months ago

1.5k
Jumbotron card

Author:
Sienna

2 years ago

11.2k
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Author:
Ameth Galarcio

11 months ago

2.7k
Hero Section
Full width hero section for landing pages

Author:
Manon Daniel

2 years ago

12.9k
Basic CTA
Simple and straightforward call to action section

Author:
Dipti narayan

1 year ago

7.3k
Call to action

Author:
Piet Vriend

2 years ago

10.8k
Banner for app download
Show App Download Buttons for the App Store and Play Store

Author:
Pixel Perfect

11 months ago

1.3k
The Future of Web Development
love my product

Author:
Code Master(Mfuranziza Dusabe Hamza)

1 month ago

136
Call to action section with image

Author:
Emily Tan

2 years ago

11.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components