Call ya

Simple Call-to-Action

This tailwind example is contributed by Matti, on 16-Jan-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are CTA,banner

Call to Action

Author Matti

Tailwind v3.4 1.6k 1

Fork Fullscreen

<section class="relative z-0 dark:bg-gray-800 before:absolute before:w-full before:h-full before:inset-0 before:bg-black/50 before:z-10 overflow-hidden md:!overflow-visible bg-fixed"
style="background-image: url('https://images.unsplash.com/photo-1493514789931-586cb221d7a7?q=80&w=2671&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); background-position: center; background-repeat: no-repeat; background-size: cover center;">
  <div class="relative z-20 w-full py-3 md:py-12">
    <div class="relative z-30 flex flex-col w-full sm:w-4/5 lg:w-4/5 mx-auto">
      <div class="w-full border border-gray-50/50 my-12 py-8 sm:px-6 md:px-12 text-white flex flex-col text-center">
        <h1 class="text-2xl md:text-3xl font-light text-gray-50 uppercase dark:text-gray-200 dark:bg-opacity-50">
          Installation, Maintenance or Inspection?
        </h1>
        <a href="#">
          <p class="text-xl md:text-3xl font-semibold mt-2 mb-2 text-emerald-600">
            0800 1234 232
          </p>
        </a>
        <div class="absolute bottom-6 left-[45%] md:left-[49%] rounded-full w-12 h-12 bg-white cursor-pointer flex pl-1.5 items-center">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" class="text-emerald-600 h-8 w-8"><defs><style>.cls-6376396cc3a86d32eae6f10f-1{fill:none;stroke:currentColor;stroke-miterlimit:10;}</style></defs><path class="cls-6376396cc3a86d32eae6f10f-1" d="M13.43,7.9a2.68,2.68,0,0,1,2.67,2.67"></path><path class="cls-6376396cc3a86d32eae6f10f-1" d="M13.43,4.7a5.87,5.87,0,0,1,5.87,5.87"></path><path class="cls-6376396cc3a86d32eae6f10f-1" d="M13.43,1.5a9.07,9.07,0,0,1,9.07,9.07"></path><path class="cls-6376396cc3a86d32eae6f10f-1" d="M18.75,21.38c-2.43,2.42-8,.79-12.46-3.67S.2,7.68,2.62,5.25L5.28,2.59l5.13,5.13L8.49,9.66a2.07,2.07,0,0,0,0,2.92l2.93,2.93a2.07,2.07,0,0,0,2.92,0l1.94-1.92,5.13,5.13Z"></path></svg>
        </div>
      </div>
    </div>
  </div>
</section>

Related Examples

Jumbotron card

Sienna

3 years ago

12.3k
Subscribe to our newsletter section

Conan Hilton

4 years ago

12k
Survey CTA

JaxStone

3 years ago

14.7k
Sign In Form
Clean and modern Sign In form with email, password, and "Forgot password" link. Fully responsive and styled with Tailwind CSS, perfect for SaaS platforms.

Lekhraj Ghimire

1 year ago

1.1k
Footer
A footer is a critical part of any professional website. A footer ensures your website is complete, professional, user-friendly, and legally compliant. It's where users go for answers when they're done scrolling.

KULDEEP

1 year ago

1.4k
Centered footer with CTA
Use this Tailwind CSS footer compoent for simple footer with center aligned everything and with CTA buttons.

Pagedone

2 years ago

2.7k
Take a Survey CTA section

JaxStone

3 years ago

12k
Call to Action
CTA with Dark and Shadow colors

KULDEEP

1 year ago

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

Eliyanto Sarage

2 years ago

3.3k
Responsive call to action

Leon Bachmann

3 years ago

10.1k
The Future of Web Development
love my product

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.4k
Product review card

Rama krishnan Subramanian

1 year ago

2.6k