tailwind.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>How to make animated Click effect using Tailwind CSS and Javascript</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
    </head>
    <body class="flex justify-center items-center h-screen bg-gray-100">
        <button id="animatedButton" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-4 px-8 rounded transition-all duration-300 transform hover:scale-105">
            Click Me
        </button>
        <script>
            const button = document.getElementById('animatedButton');
            button.addEventListener('click', () => {button.classList.add('animate-bounce');
                setTimeout(() => {
                    button.classList.remove('animate-bounce');
                }, 500);
            });
        </script>
    </body>
</html>