Status Usage

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