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

Get it on Google play / App store section

Author:
Rajesh kulkarni

2 years ago

9.8k
Call to Action Box

Author:
Aitrik Saha

9 months ago

1.4k
CTA banner
With fading bg gradient

Author:
Lautaro Gómez

1 year ago

1.1k
animated nav
animated nav

Author:
Bonimater

3 months ago

257
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

7 months ago

1.2k
Call to action

Author:
Piet Vriend

2 years ago

11.1k
Call ya
Simple Call-to-Action

Author:
Matti

9 months ago

1.2k
asimple game lay out
asimple game lay out

Author:
Bonimater

1 month ago

528
Interactive Pricing Table
This modern pricing component features a visually appealing, responsive layout with smooth hover effects, making it ideal for showcasing different plans and subscription tiers. Design and Features: ✅ Elegant Gradient Backgrounds • Each pricing card has a unique gradient overlay, transitioning from soft gray, blue, or indigo to white, enhancing contrast and visual appeal. • The rounded-2xl design ensures a polished and smooth aesthetic. ✅ Interactive Hover Effects • Cards have a subtle hover shadow enhancement, making them pop on interaction (hover:shadow-[0_0px_25px_0px_rgba(0,0,0,0.2)]). • Slight floating effect (hover:translate-y-[-5px]) gives the illusion of elevation on hover. ✅ Pricing & Plan Details • Each card presents a plan title, a short subtitle, and a bold price display (text-3xl font-extrabold text-indigo-500). • Supports free, subscription-based, and enterprise-tier pricing, ensuring flexibility for different business models. ✅ Call-to-Action Buttons • Each plan features a highly visible CTA button (bg-indigo-700 text-white rounded-md). • The buttons change color on hover (hover:bg-indigo-500) and expand slightly, encouraging user interaction. ✅ Animated Background Icons • A large, transparent icon (text-[500px] text-gray-100) dynamically moves on hover (group-hover:-translate-y-8 group-hover:-translate-x-8), adding depth and a premium feel. This pricing component is perfect for SaaS platforms, digital subscriptions, and service offerings, ensuring a modern, sleek, and engaging user experience. 🚀

Author:
Banshee

9 months ago

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

Author:
Junclarkaizen Pagu

2 years ago

9.1k
Call to action
slightly tilted call to action section

Author:
Simon Scheffer

2 years ago

11.1k
Call to action

Author:
Sophia Baker

2 years ago

10.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components