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

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

GamingOnline
used to pray game online

Author:
INGRIDE MUZIRANENGE

4 weeks ago

382
Contact us Form with Responsive

Author:
KULDEEP

4 months ago

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

Author:
Pagedone

1 year ago

1.8k
Modern Contact Section with Responsive Grid and Glassmorphic Form
A clean, professional contact section with a dual-column layout featuring contact details and a sleek glassmorphism-inspired form. Fully responsive with Tailwind CSS, supporting both light and dark modes.

Author:
Muhammad Umair Arshad

4 months ago

497
Call-to-Action Card
Early Access Signup Card

Author:
Santiago Hernandez

1 year ago

1.9k
Brutalist Hero

Author:
threehymns

11 months ago

2.3k
Hero section

Author:
Mohit Prajapati

3 years ago

12.3k
Minimal CTA section

Author:
Laurits

2 years ago

9.3k
CTA banner
With fading bg gradient

Author:
Lautaro Gómez

1 year ago

1.2k
Hero Section
Responsive Hero Section for you Project Background Image: A stunning, high-quality Unsplash photo that creates a unique visual impact. Overlay: Semi-transparent black overlay with blur effect for readability and a modern aesthetic. Content Area: Centered with a gradient background overlay for contrast, bold headline, engaging subtext. Buttons: Vibrant gradient and clean border with smooth hover animations to draw attention. Responsive Design: Looks great on all screen sizes with adaptable padding and font sizes.

Author:
KULDEEP

5 months ago

1.2k
Boimator welcoming back
Boimator welcoming back

Author:
Bonimater

3 months ago

256
CTA card with gradient border

Author:
Sameer Sultana

2 years ago

13.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components