<main class="mx-auto flex max-w-lg flex-col items-center justify-center gap-y-6 p-12 text-center">
<h1 class="text-xl font-bold">8 different button hover animation examples using Tailwind CSS</h1>
<!-- ************************************ -->
<div>1. Scale up the button on hover:</div>
<button class="rounded-lg border-2 border-gray-900 px-4 py-2 font-medium text-gray-900 transition-transform duration-300 hover:scale-110">Hover me to scale up</button>
<!-- ************************************ -->
<div>2. Rotate the button on hover:</div>
<button class="rounded-lg border-2 border-gray-900 px-4 py-2 font-medium text-gray-900 transition-transform duration-300 hover:rotate-2">Hover me to rotate</button>
<!-- ************************************ -->
<div>3. Change the button's color on hover:</div>
<button class="rounded-lg border-2 border-gray-900 px-4 py-2 font-medium text-gray-900 transition-colors duration-300 hover:bg-gray-900 hover:text-gray-50">Hover me to change color</button>
<!-- ************************************ -->
<div>4. Grow the button on hover:</div>
<button class="transition-width w-44 rounded-lg border-2 border-gray-900 px-4 py-2 font-medium text-gray-900 duration-300 hover:w-56">Hover me to grow</button>
<!-- ************************************ -->
<div>5. Move the button on hover:</div>
<button class="w-44 rounded-lg border-2 border-gray-900 px-4 py-2 font-medium text-gray-900 transition-transform duration-300 hover:-translate-y-1">Hover me to move</button>
<!-- ************************************ -->
<div>6. Add a shadow to the button on hover:</div>
<button class="w-44 rounded-lg border-2 border-gray-900 bg-white px-4 py-2 font-medium text-gray-900 transition-shadow duration-300 hover:shadow-lg">Hover me to add shadow</button>
<!-- ************************************ -->
<div>7. Change the button's text color on hover:</div>
<button class="rounded-lg border-2 border-gray-900 px-4 py-2 font-medium text-gray-900 transition-colors duration-300 hover:border-red-600 hover:text-red-600">Hover me to change text color</button>
<!-- ************************************ -->
<div>8. Fade the button on hover:</div>
<button class="rounded-lg border-2 border-gray-900 px-4 py-2 font-medium text-gray-900 transition-opacity duration-300 hover:opacity-50">Hover me to fade in</button>
</main>