Tailwind CSS Status Components

                            <div class="flex flex-col space-y-6">
  <div class="flex items-center space-x-4">
    <div class="flex items-center space-x-2">
      <span class="inline-block w-2.5 h-2.5 bg-green-500 rounded-full"></span>
      <span class="text-sm font-medium text-gray-700">Active</span>
    </div>
    <span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">23 users</span>
  </div>
  
  <div class="flex items-center space-x-4">
    <div class="flex items-center space-x-2">
      <span class="inline-block w-2.5 h-2.5 bg-yellow-500 rounded-full animate-pulse"></span>
      <span class="text-sm font-medium text-gray-700">Pending</span>
    </div>
    <span class="px-2 py-1 text-xs font-medium bg-yellow-100 text-yellow-800 rounded-full">7 requests</span>
  </div>
  
  <div class="flex items-center space-x-4">
    <div class="flex items-center space-x-2">
      <span class="inline-block w-2.5 h-2.5 bg-gray-400 rounded-full"></span>
      <span class="text-sm font-medium text-gray-700">Inactive</span>
    </div>
    <span class="px-2 py-1 text-xs font-medium bg-gray-100 text-gray-800 rounded-full">15 accounts</span>
  </div>
  
  <div class="flex items-center space-x-4">
    <div class="flex items-center space-x-2">
      <div class="relative">
        <span class="animate-ping absolute inline-flex h-2.5 w-2.5 rounded-full bg-red-400 opacity-75"></span>
        <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-red-500"></span>
      </div>
      <span class="text-sm font-medium text-gray-700">Critical</span>
    </div>
    <span class="px-2 py-1 text-xs font-medium bg-red-100 text-red-800 rounded-full">3 alerts</span>
  </div>
</div> 
                        

                            <div class="p-6 bg-white rounded-lg shadow-md space-y-6">
  <h3 class="text-lg font-semibold text-gray-800">System Status</h3>
  
  <div class="space-y-4">
    <div class="flex items-center justify-between">
      <div class="flex items-center space-x-3">
        <div class="relative">
          <span class="animate-ping absolute inline-flex h-2.5 w-2.5 rounded-full bg-green-400 opacity-75"></span>
          <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-green-500"></span>
        </div>
        <span class="text-sm text-gray-700">API Service</span>
      </div>
      <span class="text-xs text-gray-500">99.9% uptime</span>
    </div>
    
    <div class="flex items-center justify-between">
      <div class="flex items-center space-x-3">
        <div class="relative">
          <span class="animate-ping absolute inline-flex h-2.5 w-2.5 rounded-full bg-green-400 opacity-75"></span>
          <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-green-500"></span>
        </div>
        <span class="text-sm text-gray-700">Database</span>
      </div>
      <span class="text-xs text-gray-500">100% uptime</span>
    </div>
    
    <div class="flex items-center justify-between">
      <div class="flex items-center space-x-3">
        <span class="inline-block w-2.5 h-2.5 bg-yellow-500 rounded-full animate-pulse"></span>
        <span class="text-sm text-gray-700">Background Jobs</span>
      </div>
      <span class="text-xs text-gray-500">Degraded performance</span>
    </div>
    
    <div class="flex items-center justify-between">
      <div class="flex items-center space-x-3">
        <div class="relative">
          <span class="animate-ping absolute inline-flex h-2.5 w-2.5 rounded-full bg-red-400 opacity-75"></span>
          <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-red-500"></span>
        </div>
        <span class="text-sm text-gray-700">Storage Service</span>
      </div>
      <span class="text-xs text-gray-500">Outage detected</span>
    </div>
  </div>
  
  <div class="pt-4 border-t border-gray-100">
    <div class="flex justify-between items-center">
      <span class="text-xs text-gray-500">Last updated: 2 minutes ago</span>
      <button class="text-xs text-blue-600 hover:text-blue-800">Refresh</button>
    </div>
  </div>
</div> 
                        

                            <div class="flex flex-col space-y-4">
  <div class="flex items-center space-x-3">
    <span class="inline-block w-1.5 h-1.5 bg-green-500 rounded-full"></span>
    <span class="text-xs text-gray-700">Extra Small</span>
  </div>
  
  <div class="flex items-center space-x-3">
    <span class="inline-block w-2 h-2 bg-green-500 rounded-full"></span>
    <span class="text-xs text-gray-700">Small</span>
  </div>
  
  <div class="flex items-center space-x-3">
    <span class="inline-block w-3 h-3 bg-green-500 rounded-full"></span>
    <span class="text-sm text-gray-700">Medium (Default)</span>
  </div>
  
  <div class="flex items-center space-x-3">
    <span class="inline-block w-4 h-4 bg-green-500 rounded-full"></span>
    <span class="text-sm text-gray-700">Large</span>
  </div>
  
  <div class="flex items-center space-x-3">
    <span class="inline-block w-5 h-5 bg-green-500 rounded-full"></span>
    <span class="text-sm text-gray-700">Extra Large</span>
  </div>
</div> 
                        

                            <div class="flex flex-col space-y-4">
  <div class="flex items-center space-x-3">
    <span class="inline-block w-3 h-3 bg-blue-600 rounded-full"></span>
    <span class="text-sm text-gray-700">Primary</span>
  </div>
  
  <div class="flex items-center space-x-3">
    <span class="inline-block w-3 h-3 bg-purple-600 rounded-full"></span>
    <span class="text-sm text-gray-700">Secondary</span>
  </div>
  
  <div class="flex items-center space-x-3">
    <span class="inline-block w-3 h-3 bg-emerald-600 rounded-full"></span>
    <span class="text-sm text-gray-700">Accent</span>
  </div>
  
  <div class="flex items-center space-x-3">
    <span class="inline-block w-3 h-3 bg-gray-700 rounded-full"></span>
    <span class="text-sm text-gray-700">Neutral</span>
  </div>
  
  <div class="flex items-center space-x-3">
    <span class="inline-block w-3 h-3 bg-cyan-500 rounded-full"></span>
    <span class="text-sm text-gray-700">Info</span>
  </div>
  
  <div class="flex items-center space-x-3">
    <span class="inline-block w-3 h-3 bg-green-500 rounded-full"></span>
    <span class="text-sm text-gray-700">Success</span>
  </div>
  
  <div class="flex items-center space-x-3">
    <span class="inline-block w-3 h-3 bg-yellow-500 rounded-full"></span>
    <span class="text-sm text-gray-700">Warning</span>
  </div>
  
  <div class="flex items-center space-x-3">
    <span class="inline-block w-3 h-3 bg-red-500 rounded-full"></span>
    <span class="text-sm text-gray-700">Error</span>
  </div>
</div> 
                        

                            <div class="flex items-center space-x-3">
  <span class="inline-block w-3 h-3 bg-green-500 rounded-full"></span>
  <span class="text-sm text-gray-700">Online</span>
</div> 
                        

                            <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>