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

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

Geaux Code CTA Section
CTA with background patterns

Author:
Andrew Weisbeck

1 year ago

1.9k
Call to action banner

Author:
isolde

1 year ago

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

Author:
Noah Schmidt

2 years ago

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

Author:
Prajwal Hallale

2 years ago

9.6k
CTA card with gradient background
Grab users attention using this eye catching CTA card

Author:
Emre Yılmaz

1 year ago

3.7k
Clean CTA section

Author:
Pixel Perfect

1 year ago

3.7k
Bug Beach Day Heatwave
This playful animation brings sweltering summer insects to life with pure HTML and Tailwind CSS. Watch as: 🔥 Glowing Fireflies pulse with heat-radiant light, their wings shimmering in the desert sun 🐞 Overheated Ladybugs scuttle across cracked earth, their red shells reflecting the blazing heat ☀️ A Wobbling Sun dominates the sky, emitting pulsing heat waves across the animated landscape

Author:
Bonimater

6 months ago

783
CTA - Htmlwind
Screenshot on dark background

Author:
Htmlwind

5 months ago

379
Call to Action
CTA with Dark and Shadow colors

Author:
KULDEEP

5 months ago

740
CTA section with light beam from bottom effect
It also has support for dark mode

Author:
Pixel Perfect

1 year ago

1.9k
Login page
Login and register page, you can reuse both

Author:
Abhiraj

10 months ago

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

Author:
Ron Hicks

3 years ago

11.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components