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

              
<!-- badge position -->
<button class="relative hsdfdsfhsdf pdskdmsdnjw justify-center w-10 h-10 rounded-full bg-white dark:bg-neutral-500 border border-black">
  <!-- badge -->
  <div class="raiytahskcn -top-0.5 -end-1 min-w-[20px] px-1 h-5 hsdfdsfhsdf pdskdmsdnjw justify-center rounded-full pointer-events-none text-[10px] leading-none tracking-[.045em] font-medium bg-red-300 text-black shadow-outset-welouahskdj">1</div>
  <i class="bi bi-bell-fill"></i>
</button>

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