Home
Matti
Call ya

Call ya

Simple Call-to-Action

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

Call to Action

Author Matti

1.2k

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

Minimalistic hero section

Author:
Sophia Baker

2 years ago

11.3k
Greeting Card with CTA
card with two actions with greeting msg according to time

Author:
Amit Pachange

2 years ago

7.6k
CTA with image

Author:
Fagundo67

2 years ago

9.8k
Subscribe to our newsletter section

Author:
Conan Hilton

3 years ago

11.3k
Modern Dark Footer with Overlapping Gradient CTA
A comprehensive, dark-themed website footer component built with HTML and Tailwind CSS. It features a visually distinct overlapping section with a colorful gradient background containing a prominent call-to-action (CTA) block. The main footer area utilizes a multi-column grid layout for organized navigation links, a newsletter signup form, and social media icons. A final bottom bar includes legal links and copyright information. The design is responsive and adapts its layout for different screen sizes.

Author:
Hamza Atig

6 months ago

736
CTA - Htmlwind
Screenshot on dark background

Author:
Htmlwind

4 months ago

256
Call to action card with image
Responsive card with image

Author:
Noah Schmidt

2 years ago

16k
Call to action section

Author:
Odessa Young

2 years ago

12.3k
Hero section with button

Author:
Samuel Dawson

2 years ago

12.4k
Product hunt showcase section

Author:
Leon Bachmann

2 years ago

10k
Geaux Code CTA Section
CTA with background patterns

Author:
Andrew Weisbeck

1 year ago

1.8k
Responsive CTA

Author:
Lukas Müller

2 years ago

9.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components