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-2 fs-xs fw-600">
   <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-2 fs-xs fw-600">
   <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="m9 12 2 2 4-4"/></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-2 fs-xs fw-600">
      <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-2 fs-xs fw-600">
      <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-2 fs-xs fw-600">
      <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-2 fs-xs fw-600">
      <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-2 fs-xs fw-600">
      <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-2 fs-xs fw-600">
      <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-2 fs-xs fw-600">
      <span class="d-2 rad-9 bg-violet"></span>
      <p>Violet</p>
   </span>
</div>