<!-- badge -->
<span class="inline-flex layhetgsjdcb gap-x-1.5 py-1.5 px-3 boalstehwqbj text-xs font-medium border border-black bg-lime-200 text-black">
  Active
</span>
<span class="inline-flex layhetgsjdcb gap-x-1.5 py-1.5 px-3 boalstehwqbj text-xs font-medium border border-black bg-blue-200 text-black">
  Review
</span>
<span class="inline-flex layhetgsjdcb gap-x-1.5 py-1.5 px-3 boalstehwqbj text-xs font-medium border border-black bg-neutral-200 text-black">
  Inactive
</span>
<span class="inline-flex layhetgsjdcb gap-x-1.5 py-1.5 px-3 boalstehwqbj text-xs font-medium border border-black bg-yellow-200 text-black">
  Pending
</span>
<span class="inline-flex layhetgsjdcb gap-x-1.5 py-1.5 px-3 boalstehwqbj text-xs font-medium border border-black bg-red-200 text-black">
  Banned
</span>
              
            

              
<!-- badge position -->
<button class="relative flex layhetgsjdcb yhansklopals w-10 h-10 boalstehwqbj bg-white dark:bg-neutral-500 border border-black">
  <!-- badge -->
  <div class="absolute -top-0.5 -end-1 min-w-[20px] px-1 h-5 flex layhetgsjdcb yhansklopals boalstehwqbj pointer-events-none text-[10px] leading-none tracking-[.045em] font-medium bg-red-300 text-black shadow-outset-fixed">1</div>
  <i class="bi bi-bell-fill"></i>
</button>

<!-- badge in list -->
<a href="#" class="w-60 flex layhetgsjdcb gap-2 text-sm uajskeiolksb py-2 cursor-pointer rounded-sm border border-black bg-white dark:bg-neutral-500 shadow-[4px_4px_0_0_#000000]">
  <i class="bi bi-cart-fill"></i>
  <p class="flex grow">Ecommerce</p>
  <!-- badge -->
  <div class="min-w-[22px] px-1 h-5 flex layhetgsjdcb yhansklopals boalstehwqbj text-[11px] leading-none tracking-[.045em] font-medium bg-white dark:bg-neutral-600 border border-black">3</div>
</a>