Badge

<span class="d-if ai-c jc-c g-1 bg-silver-1 b-1 bc-silver-4 tc-silver-11 px-2 py-1 rad-0 fs-xs fw-600 lh-2">
  <span class="d-2 rad-9 bg-silver-8"></span>
  <p>Offline</p>
</span>

<span class="d-if ai-c jc-c g-1 bg-blue-1 b-1 bc-blue-4 tc-blue-10 px-2 py-1 rad-0 fs-xs fw-600 lh-2">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    class="w-3 h-3"
    viewBox="0 0 256 256"
  >
    <path
      d="M54.46,201.54c-9.2-9.2-3.1-28.53-7.78-39.85C41.82,150,24,140.5,24,128s17.82-22,22.68-33.69C51.36,83,45.26,63.66,54.46,54.46S83,51.36,94.31,46.68C106.05,41.82,115.5,24,128,24S150,41.82,161.69,46.68c11.32,4.68,30.65-1.42,39.85,7.78s3.1,28.53,7.78,39.85C214.18,106.05,232,115.5,232,128S214.18,150,209.32,161.69c-4.68,11.32,1.42,30.65-7.78,39.85s-28.53,3.1-39.85,7.78C150,214.18,140.5,232,128,232s-22-17.82-33.69-22.68C83,204.64,63.66,210.74,54.46,201.54Z"
      fill="none"
      stroke="currentColor"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="16"
    />
    <polyline
      points="88 136 112 160 168 104"
      fill="none"
      stroke="currentColor"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="16"
    />
  </svg>
  <p>Verified</p>
</span>

<div class="d-g gtc-1 sm:gtc-4 md:gtc-7 g-3">
  <span class="d-if ai-c jc-c g-1 bg-red-1 b-1 bc-red-4 tc-red-10 px-2 py-1 rad-0 fs-xs fw-600 lh-2">
    <span class="d-2 rad-9 bg-red"></span>
    <p>Red</p>
  </span>
  <span class="d-if ai-c jc-c g-1 bg-orange-1 b-1 bc-orange-4 tc-orange-10 px-2 py-1 rad-0 fs-xs fw-600 lh-2">
    <span class="d-2 rad-9 bg-orange"></span>
    <p>Orange</p>
  </span>
  <span class="d-if ai-c jc-c g-1 bg-yellow-1 b-1 bc-yellow-4 tc-yellow-10 px-2 py-1 rad-0 fs-xs fw-600 lh-2">
    <span class="d-2 rad-9 bg-yellow"></span>
    <p>Yellow</p>
  </span>
  <span class="d-if ai-c jc-c g-1 bg-green-1 b-1 bc-green-4 tc-green-10 px-2 py-1 rad-0 fs-xs fw-600 lh-2">
    <span class="d-2 rad-9 bg-green"></span>
    <p>Green</p>
  </span>
  <span class="d-if ai-c jc-c g-1 bg-blue-1 b-1 bc-blue-4 tc-blue-10 px-2 py-1 rad-0 fs-xs fw-600 lh-2">
    <span class="d-2 rad-9 bg-blue"></span>
    <p>Blue</p>
  </span>
  <span class="d-if ai-c jc-c g-1 bg-indigo-1 b-1 bc-indigo-4 tc-indigo-10 px-2 py-1 rad-0 fs-xs fw-600 lh-2">
    <span class="d-2 rad-9 bg-indigo"></span>
    <p>Indigo</p>
  </span>
  <span class="d-if ai-c jc-c g-1 bg-violet-1 b-1 bc-violet-4 tc-violet-10 px-2 py-1 rad-0 fs-xs fw-600 lh-2">
    <span class="d-2 rad-9 bg-violet"></span>
    <p>Violet</p>
  </span>
</div>