Status With Badges

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