How to make a CTA Animation with Tailwind CSS ?

Last Updated : 12 Apr, 2024

To enhance the engagement level of your website’s Call-to-Action (CTA) elements we use Tailwind CSS utility classes. By directly customizing transition effects with Tailwind CSS, you can effortlessly introduce captivating animation effects to your CTAs, improving user interaction and overall user experience.

Approach

In the HTML5 document, integrate the Tailwind CSS style via a CDN. The main content comprises a text container containing a title, an image, a description, and a button.
Apply transition properties such as duration, easing function, and more, and you can create smooth animation effects that enhance the visual appeal of your CTAs.
The button changes appearance when hovered over, achieved with Tailwind CSS’s hover variants (hover:bg-indigo-600). Enhancing interactivity and user experience without additional JavaScript or custom CSS.
Various elements have animation effects like pulse animations (animate-pulse) for the title, image, and button, creating a subtle pulsating effect.

Example: The below code describes CTA Animation with Tailwind CSS.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Discover CollabHub: A 
             Modern Collaboration Tool
      </title>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
</head>

<body class="bg-gray-200 flex justify-center
             items-center min-h-screen">
    <div class="text-center">
        <h1 class="text-4xl font-semibold 
                   mb-8 animate-pulse">
          Discover CollabHub: A Modern Collaboration Tool
          </h1>
        <div class="max-w-md mx-auto">
            <div class="bg-white p-6 rounded-lg 
                        shadow-md transition 
                        duration-300 hover:shadow-xl
                        hover:bg-gray-100">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240404193146/geeks.png"
                     alt="Product Image" 
                     class="mb-6 rounded-lg border-2
                            border-blue-500 max-w-full">
                <h2 class="text-2xl font-semibold mb-4">
                  CollabHub
                  </h2>
                <p class="text-gray-700 mb-6">
                      CollabHub is a cutting-edge software
                      solution designed to enhance project
                    management and collaboration efficiency.
                      It offers a range of features tailored 
                      to modern teams, enabling seamless 
                      coordination and improved productivity.
                  </p>
                <button class="bg-blue-500 hover:bg-indigo-600
                               text-white font-bold py-3 px-6
                               rounded-full transition 
                               duration-300 shadow-md 
                               animate-bounce">
                  Get Started
                  </button>
            </div>
        </div>
    </div>
</body>

</html>