List Group

<!--
  Day 5: List group

  Created by John Champ

  Founder of Pixelcave      -> https://pixelcave.com
  Building Tailkit          -> https://tailkit.com
  Let's connect on X        -> https://x.com/pixelcave_john
                on Bluesky  -> https://bsky.app/profile/pixelcave-john.bsky.social
-->

<!-- List Group -->
<div
  class="relative mx-auto w-full max-w-sm rounded-3xl bg-white p-4 ring-8 shadow-sm shadow-slate-500/10 ring-slate-900/5"
>
  <ul
    class="divide-y divide-gray-200 rounded-xl border border-gray-200 bg-white"
  >
    <li class="flex items-center justify-between px-5 py-3">
      <div>
        <h4 class="mb-1 text-sm font-semibold">Website</h4>
        <h5 class="text-sm font-medium text-gray-500">No problems detected.</h5>
      </div>
      <div
        class="inline-flex rounded-full bg-emerald-100 px-2 py-1 text-xs leading-4 font-semibold text-emerald-800"
      >
        <span class="sm:hidden">&bull;</span>
        <span class="hidden sm:inline">active</span>
      </div>
    </li>
    <li class="flex items-center justify-between px-5 py-3">
      <div>
        <h4 class="mb-1 text-sm font-semibold">Desktop App</h4>
        <h5 class="text-sm font-medium text-gray-500">No problems detected.</h5>
      </div>
      <div
        class="inline-flex rounded-full bg-emerald-100 px-2 py-1 text-xs leading-4 font-semibold text-emerald-800"
      >
        <span class="sm:hidden">&bull;</span>
        <span class="hidden sm:inline">active</span>
      </div>
    </li>
    <li class="flex items-center justify-between px-5 py-3">
      <div>
        <h4 class="mb-1 text-sm font-semibold">Mobile App</h4>
        <h5 class="text-sm font-medium text-gray-500">3 errors occured.</h5>
      </div>
      <div
        class="inline-flex rounded-full bg-orange-100 px-2 py-1 text-xs leading-4 font-semibold text-orange-800"
      >
        <span class="sm:hidden">&bull;</span>
        <span class="hidden sm:inline">restarting</span>
      </div>
    </li>
    <li class="flex items-center justify-between px-5 py-3">
      <div>
        <h4 class="mb-1 text-sm font-semibold">API</h4>
        <h5 class="text-sm font-medium text-gray-500">Server is down.</h5>
      </div>
      <div
        class="inline-flex rounded-full bg-rose-100 px-2 py-1 text-xs leading-4 font-semibold text-rose-800"
      >
        <span class="sm:hidden">&bull;</span>
        <span class="hidden sm:inline">inactive</span>
      </div>
    </li>
    <li class="flex items-center justify-between px-5 py-3">
      <div>
        <h4 class="mb-1 text-sm font-semibold">Documentation</h4>
        <h5 class="text-sm font-medium text-gray-500">No problems detected.</h5>
      </div>
      <div
        class="inline-flex rounded-full bg-emerald-100 px-2 py-1 text-xs leading-4 font-semibold text-emerald-800"
      >
        <span class="sm:hidden">&bull;</span>
        <span class="hidden sm:inline">active</span>
      </div>
    </li>
  </ul>
</div>
<!-- END List Group -->