Badges
Ready to use Tailwind CSS Badge Components with production-ready, copy-paste HTML code. Use them as they are, or as a starting point to build beautiful websites.
Basic
Preview
<span class="rounded-md bg-gray-50 px-1.5 py-1 text-xs font-medium text-gray-700 ring-1 ring-inset ring-gray-200">Badge</span>
<span class="rounded-md bg-yellow-50 px-1.5 py-1 text-xs font-medium text-yellow-700 ring-1 ring-inset ring-yellow-300">Badge</span>
<span class="rounded-md bg-red-50 px-1.5 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-200">Badge</span>
<span class="rounded-md bg-green-50 px-1.5 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-200">Badge</span>
<span class="rounded-md bg-sky-50 px-1.5 py-1 text-xs font-medium text-sky-700 ring-1 ring-inset ring-sky-200">Badge</span>
<span class="rounded-md bg-blue-50 px-1.5 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-200">Badge</span>
<span class="rounded-md bg-indigo-50 px-1.5 py-1 text-xs font-medium text-indigo-700 ring-1 ring-inset ring-indigo-200">Badge</span>
<span class="rounded-md bg-purple-50 px-1.5 py-1 text-xs font-medium text-purple-700 ring-1 ring-inset ring-purple-200">Badge</span>
<span class="rounded-md bg-pink-50 px-1.5 py-1 text-xs font-medium text-pink-700 ring-1 ring-inset ring-pink-200">Badge</span>
<span class="rounded-md bg-orange-50 px-1.5 py-1 text-xs font-medium text-orange-700 ring-1 ring-inset ring-orange-200">Badge</span>