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

Hero section with image

Author:
Sophia Baker

2 years ago

13k
Blog post card
Responsive blog post or article card. This card can also be used as a CTA

Author:
Anonymous

2 years ago

10.4k
Minimalistic hero section

Author:
Sophia Baker

2 years ago

11.7k
Responsive Hero Section
Get this professional hero section for your website. Includes a gradient text effect, stylish background blurs, and a perfectly aligned image section. Easy to integrate and fully customizable for any project.

Author:
Homayoun

3 months ago

98
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

6 months ago

1.3k
Brutalist Hero

Author:
threehymns

1 year ago

2.5k
Call for action

Author:
Sophia Baker

2 years ago

11.4k
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Author:
Ameth Galarcio

1 year ago

3.5k
Registration Form with Validation & Success State
A modern and interactive registration form built using Tailwind CSS and Alpine.js, designed for seamless user onboarding with real-time validation and elegant animations. This component includes client-side form validation, dynamic password visibility toggles, and a success confirmation screen with personalized feedback. It’s fully responsive, dark mode–ready, and styled for modern SaaS or startup platforms. ✨ Key Features 🧠 Real-time input validation for required fields (name, email, password, etc.) 🔒 Show/hide password toggle with animated SVG icons ✅ Success message with user details after submission 💨 Animated transitions using Alpine.js 🌙 Dark mode and light mode compatible 📱 Fully responsive across all screen sizes 🧩 Built with pure Tailwind CSS and Alpine.js (no external libraries) 💡 Perfect for: Registration or sign-up pages SaaS onboarding flows Portfolio or agency login systems Form validation demos or UI component libraries

Author:
wavy kits

3 months ago

215
Call to action

Author:
Leon Bachmann

3 years ago

9.7k
Simple Btn animation

Author:
Ranit Saha

1 year ago

1.8k
Landing page

Author:
Maxim

9 months ago

1.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components