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.8k

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

Beautiful CTA w/ large buttons
This CTA card also has a features list

Author:
Carla Hoffman

1 year ago

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

6 months ago

1k
Modern CTA section
CTA banner

Author:
Pixel Perfect

1 year ago

1.7k
Hero Section
Full width hero section for landing pages

Author:
Manon Daniel

3 years ago

13.4k
Call to Action (CTA) Section

Author:
ariaw

6 months ago

559
Call to action card with image
Responsive card with image

Author:
Noah Schmidt

2 years ago

15.9k
CTA block for "Take our survey"
Get users attention to he survey form

Author:
Prajwal Hallale

2 years ago

9.6k
Call to action

Author:
Leon Bachmann

2 years ago

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

Author:
Bunny

2 years ago

11.7k
Call to Action
CTA with Dark and Shadow colors

Author:
KULDEEP

3 months ago

367
Call to Action (CTA with Background Image)
A Call to Action (CTA) is an essential element in marketing and web design that prompts users to take a specific desired action. When combined with a compelling background image, it can significantly enhance user engagement and conversion rates.

Author:
Eliyanto Sarage

1 year ago

2.5k
Join Our Community Banner
Encourage users to become members of a community.

Author:
Diego Chavez

2 years ago

8.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components