Tailwind CSS Badges - Flowbite
Use Tailwind CSS badges as elements to show counts or labels separately or inside other components
The badge component can be used to complement other elements such as buttons or text elements as a label or to show the count of a given data, such as the number of comments for an article or how much time has passed by since a comment has been made.
Alternatively, badges can also be used as standalone elements
that link to a certain page by using the anchor tag instead of
a span element.
Default badge
Use the following badge elements to indicate counts or labels inside or outside components.
Default
Dark
Red
Green
Yellow
Indigo
Purple
Pink
<span class="bg-gradient-to-br from-fuchsia-500 to-voilet-500 text-white text-xs font-semibold mr-2 px-2.5 py-1 rounded">Default</span>
<span class="bg-gradient-to-br from-dark-700 to-dark-900 text-white text-xs font-semibold mr-2 px-2.5 py-1 rounded">Dark</span>
<span class="bg-gradient-to-br from-red-400 to-red-600 text-white text-xs font-semibold mr-2 px-2.5 py-1 rounded">Red</span>
<span class="bg-gradient-to-br from-green-500 to-green-700 text-white text-xs font-semibold mr-2 px-2.5 py-1 rounded">Green</span>
<span class="bg-gradient-to-br from-yellow-700 to-yellow-900 text-white text-xs font-semibold mr-2 px-2.5 py-1 rounded">Yellow</span>
<span class="bg-gradient-to-br from-indigo-500 to-indigo-700 text-white text-xs font-semibold mr-2 px-2.5 py-1 rounded">Indigo</span>
<span class="bg-gradient-to-br from-purple-500 to-purple-700 text-white text-xs font-semibold mr-2 px-2.5 py-1 rounded">Purple</span>
<span class="bg-gradient-to-br from-pink-500 to-pink-700 text-white text-xs font-semibold mr-2 px-2.5 py-1 rounded">Pink</span>Larger badges
Use the text-sm to create a larger variant of the
badges.
Default
Dark
Red
Green
Yellow
Indigo
Purple
Pink
<span class="bg-gradient-to-br from-fuchsia-500 to-voilet-500 text-white text-sm font-semibold mr-2 px-3 py-1 rounded">Default</span>
<span class="bg-gradient-to-br from-dark-700 to-dark-900 text-white text-sm font-semibold mr-2 px-3 py-1 rounded">Dark</span>
<span class="bg-gradient-to-br from-red-400 to-red-600 text-white text-sm font-semibold mr-2 px-3 py-1 rounded">Red</span>
<span class="bg-gradient-to-br from-green-500 to-green-700 text-white text-sm font-semibold mr-2 px-3 py-1 rounded">Green</span>
<span class="bg-gradient-to-br from-yellow-700 to-yellow-900 text-white text-sm font-semibold mr-2 px-3 py-1 rounded">Yellow</span>
<span class="bg-gradient-to-br from-indigo-500 to-indigo-700 text-white text-sm font-semibold mr-2 px-3 py-1 rounded">Indigo</span>
<span class="bg-gradient-to-br from-purple-500 to-purple-700 text-white text-sm font-semibold mr-2 px-3 py-1 rounded">Purple</span>
<span class="bg-gradient-to-br from-pink-500 to-pink-700 text-white text-sm font-semibold mr-2 px-3 py-1 rounded">Pink</span>If you want more details about Badge component, please check the official docs on Flowbite.