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 2

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

Call to Action

Abdul Baset Bappy

1 year ago

1.3k
Acode master
Welcome to Hamza's official portfolio — a creative developer blending modern design with powerful code. Explore animations, projects, and innovations crafted with HTML, Tailwind CSS, and passion.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.4k
Take a Survey CTA section

JaxStone

3 years ago

12.1k
Boimator welcoming back
Boimator welcoming back

Bonimater

1 year ago

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

Ameth Galarcio

2 years ago

4.2k
Animated Text Rotator | Smooth Tailwindcss Text Transition Effects
Beautiful animated text rotation component with smooth fade transitions. Perfect for hero sections, showcasing features, and engaging website visitors with dynamic content.

Homayoun

11 months ago

759
Join Our Community Banner
Encourage users to become members of a community.

Diego Chavez

3 years ago

9k
Applications Showcase
This is a stylish and interactive application showcase component designed for web use. It features the following elements: Background Styling: The main container has a rounded-rectangle shape (rounded-3xl) with a subtle white base overlaying a high-resolution background image, styled with background-size: 600px for an artistic touch. The image itself dynamically serves as a backdrop, giving the component a layered appearance. Main Icon: A small circular icon, located at the top-right corner, appears with smooth hover effects: Enlarges to double its size (scale-[2]). Rotates (rotate-[410deg]). Moves diagonally upwards-right (translate-x-3, -translate-y-3). These transitions occur over a duration of 1 second (transition duration-1000). Overlay Gradient: A transparent gradient overlay (bg-gradient-to-l) adds a polished depth effect, transitioning from black (from-black/80) to lighter shades. App Icon and Info: Icon: The app icon is a smaller, bordered square image (rounded-2xl) with hover shrink animations (group-hover:scale-95). Text: A bold application title (text-md font-semibold) with hover-animated underline effects that gradually expand from left to right. A short app description styled as secondary text. Call-to-Action Button: Below the card is a subtle, rounded button (rounded-full) encouraging interaction. It features: A hover effect with color inversion (gray to black). A lift effect (hover:-translate-y-1) when hovered. This component is perfect for modern app showcases, offering a dynamic, user-friendly visual experience. It ensures a professional look while engaging users through smooth animations and clear calls to action.

Banshee

1 year ago

3.6k
Highlighted Important section with button

Amit Pachange

3 years ago

10.2k
Animated Gradient Button Component
Button component with smooth hover effects and glass-morphism design. Features expanding gradient animation, rotating icon, and responsive layout. Perfect for call-to-action buttons, landing pages, and web applications. Easy copy-paste Tailwind CSS code ready for integration.

Homayoun

1 year ago

1.3k
Tailwind CTA section

Moriba Traore

3 years ago

14.3k
Call to action

Sophia Baker

3 years ago

11.5k