Animations Example

<!doctype html>
<title>Tailwind CSS Animation Example</title>
<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-slate-50 p-8 space-y-12">

<div class="max-w-4xl mx-auto space-y-12">
    
    
    <div class="space-y-4">
      <h3 class="text-lg font-bold text-slate-700">1. Hover Transitions</h3>
      <div class="flex gap-4">
        <button class="px-6 py-3 bg-blue-500 text-white rounded-lg transition-colors hover:bg-blue-700 duration-300">
          Color Transition
        </button>
        <button class="px-6 py-3 bg-indigo-500 text-white rounded-lg transition-transform hover:scale-110 duration-300">
          Scale Transition
        </button>
        <button class="px-6 py-3 bg-emerald-500 text-white rounded-lg transition-opacity hover:opacity-50 duration-500">
          Opacity Transition
        </button>
      </div>
    </div>

<div class="space-y-4">
      <h3 class="text-lg font-bold text-slate-700">2. Built-in Animations</h3>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="p-6 bg-white border border-slate-200 shadow-sm text-center">
          <div class="w-10 h-10 bg-blue-500 mx-auto animate-spin mb-4"></div>
          <p class="text-[10px] font-mono">animate-spin</p>
        </div>
        <div class="p-6 bg-white border border-slate-200 rounded-xl shadow-sm text-center">
          <div class="w-10 h-10 bg-rose-500 rounded-full mx-auto animate-ping mb-4"></div>
          <p class="text-[10px] font-mono">animate-ping</p>
        </div>
        <div class="p-6 bg-white border border-slate-200 rounded-xl shadow-sm text-center">
          <div class="w-10 h-10 bg-amber-500 rounded-full mx-auto animate-pulse mb-4"></div>
          <p class="text-[10px] font-mono">animate-pulse</p>
        </div>
        <div class="p-6 bg-white border border-slate-200 rounded-xl shadow-sm text-center">
          <div class="w-10 h-10 bg-emerald-500 rounded-full mx-auto animate-bounce mb-4"></div>
          <p class="text-[10px] font-mono">animate-bounce</p>
        </div>
      </div>
    </div>

</div>

</body>