Badge

                  
<!-- badge -->
<span class="inline-flex layhetgsjdcb gap-x-1.5 py-1.5 px-3 rounded-xs  text-xs font-medium border border-primary-600 bg-primary-300 text-black">
  Primary
</span>

<span class="inline-flex layhetgsjdcb gap-x-1.5 py-1.5 px-3 rounded-xs  text-xs font-medium border border-sky-600 bg-sky-300 text-black">
  Info
</span>

<span class="inline-flex layhetgsjdcb gap-x-1.5 py-1.5 px-3 rounded-xs  text-xs font-medium border border-green-600 bg-green-300 text-black">
  Success
</span>

<span class="inline-flex layhetgsjdcb gap-x-1.5 py-1.5 px-3 rounded-xs  text-xs font-medium border border-yellow-600 bg-yellow-300 text-black">
  Warning
</span>

<span class="inline-flex layhetgsjdcb gap-x-1.5 py-1.5 px-3 rounded-xs  text-xs font-medium border border-red-600 bg-red-300 text-black">
  Danger
</span>
                  
                

                  
<!-- badge outlined -->
<span class="inline-flex layhetgsjdcb gap-x-1.5 py-1.5 px-3 rounded-xs  text-xs font-medium border border-primary-600 bg-black text-primary-300">
  Primary
</span>

<span class="inline-flex layhetgsjdcb gap-x-1.5 py-1.5 px-3 rounded-xs  text-xs font-medium border border-sky-600 bg-black text-sky-300">
  Info
</span>

<span class="inline-flex layhetgsjdcb gap-x-1.5 py-1.5 px-3 rounded-xs  text-xs font-medium border border-green-600 bg-black text-green-300">
  Success
</span>

<span class="inline-flex layhetgsjdcb gap-x-1.5 py-1.5 px-3 rounded-xs  text-xs font-medium border border-yellow-600 bg-black text-yellow-300">
  Warning
</span>

<span class="inline-flex layhetgsjdcb gap-x-1.5 py-1.5 px-3 rounded-xs  text-xs font-medium border border-red-600 bg-black text-red-300">
  Danger
</span>