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

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

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

Author:
Diego Chavez

1 year ago

7.6k
Hero section with image

Author:
Sophia Baker

2 years ago

11.8k
Simple Btn animation

Author:
Ranit Saha

3 months ago

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

Author:
Junclarkaizen Pagu

1 year ago

8k
Call to Action (for app stores)
Download app section with Playstore and Appstore button

Author:
Ron Hicks

2 years ago

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

4 weeks ago

175
Get the app section
Play store and App store buttons

Author:
Sophia Baker

2 years ago

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

Author:
Noah Schmidt

2 years ago

14.9k
Product hunt showcase section

Author:
Leon Bachmann

2 years ago

9.4k
Call to Action Box

Author:
Aitrik Saha

3 months ago

611
Clean CTA section

Author:
Pixel Perfect

1 year ago

3.2k
CTA banner
Capture the attention of the user with full-width CTA Section

Author:
Anonymous

1 year ago

3.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components