Status Animations

                    <div class="flex flex-col space-y-8">
  <div class="flex items-center space-x-3">
    <div class="relative">
      <span class="animate-ping absolute inline-flex h-3 w-3 rounded-full bg-red-400 opacity-75"></span>
      <span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
    </div>
    <span class="text-sm text-gray-700">Server is down (ping animation)</span>
  </div>
  
  <div class="flex items-center space-x-3">
    <span class="inline-block w-3 h-3 bg-cyan-500 rounded-full animate-bounce"></span>
    <span class="text-sm text-gray-700">Unread messages (bounce animation)</span>
  </div>
  
  <div class="flex items-center space-x-3">
    <span class="inline-block w-3 h-3 bg-yellow-500 rounded-full animate-pulse"></span>
    <span class="text-sm text-gray-700">Processing (pulse animation)</span>
  </div>
  
  <div class="flex items-center space-x-3">
    <div class="relative">
      <span class="animate-ping absolute inline-flex h-3 w-3 rounded-full bg-green-400 opacity-75"></span>
      <span class="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
    </div>
    <span class="text-sm text-gray-700">Live connection (ping animation)</span>
  </div>
</div>