Tailwind CSS Badges Components
Tailwinds CSS Badges crafted by TailGrids, badges are widely used to provide important signal on UI in tiny simple area. Tailwind CSS badges are expertly crafted by TailGrids. Badges Tailwind components are widely used as they provide crucial signals on user interfaces in small areas. In Tailwind sections, you can find a large array of badges such as a primary badge, a secondary badge, a gray badge, a dark badge, a warning badge, a light badge, a success badge, a danger badge, and an info badge. The best thing about these Tailwind CSS UI components is that they are all free and you can choose the one according to your preference and requirements. Remember that badges are the perfect way to add more information to your content. Hence, these responsive badges can come in handy when you wish to add information like a label or count to any given content.
<span
class="m-2 inline-block rounded bg-black py-1 px-2 text-sm font-semibold text-white"
>
Dark
</span>
<span
class="m-2 inline-block rounded border border-black py-1 px-2 text-sm font-semibold text-black"
>
Dark
</span>
<span
class="m-2 inline-block rounded-full bg-black py-1 px-3 text-sm font-semibold text-white"
>
Dark
</span>
<span
class="m-2 inline-block rounded-full border border-black py-1 px-3 text-sm font-semibold text-black"
>
Dark
</span>
<span class="m-2 inline-block rounded-full border border-black bg-black bg-opacity-5 py-1 px-3 text-sm font-semibold text-black">
Dark
</span>
<span class="m-2 inline-block rounded border border-black bg-black bg-opacity-5 py-1 px-2 text-sm font-semibold text-black">
Dark
</span>
<span
class="bg-warning m-2 inline-block rounded py-1 px-2 text-sm font-semibold text-black"
>
Warning
</span>
<span
class="border-warning text-warning m-2 inline-block rounded border py-1 px-2 text-sm font-semibold"
>
Warning
</span>
<span
class="bg-warning m-2 inline-block rounded-full py-1 px-3 text-sm font-semibold text-black"
>
Warning
</span>
<span
class="border-warning text-warning m-2 inline-block rounded-full border py-1 px-3 text-sm font-semibold"
>
Warning
</span>
<span class="border-warning bg-warning text-warning m-2 inline-block rounded-full border bg-opacity-5 py-1 px-3 text-sm font-semibold">
Warning
</span>
<span class="border-warning bg-warning text-warning m-2 inline-block rounded border bg-opacity-5 py-1 px-2 text-sm font-semibold">
Warning
</span>
<span
class="bg-primary m-2 inline-block rounded py-1 px-2 text-sm font-semibold text-white"
>
Primary
</span>
<span
class="border-primary text-primary m-2 inline-block rounded border py-1 px-2 text-sm font-semibold"
>
Primary
</span>
<span
class="bg-primary m-2 inline-block rounded-full py-1 px-3 text-sm font-semibold text-white"
>
Primary
</span>
<span
class="border-primary text-primary m-2 inline-block rounded-full border py-1 px-3 text-sm font-semibold"
>
Primary
</span>
<span class="border-primary bg-primary text-primary m-2 inline-block rounded-full border bg-opacity-5 py-1 px-3 text-sm font-semibold">
Primary
</span>
<span class="border-primary bg-primary text-primary m-2 inline-block rounded border bg-opacity-5 py-1 px-2 text-sm font-semibold">
Primary
</span>
<span
class="bg-body-color m-2 inline-block rounded py-1 px-2 text-sm font-semibold text-white"
>
Gray
</span>
<span
class="border-body-color text-body-color m-2 inline-block rounded border py-1 px-2 text-sm font-semibold"
>
Gray
</span>
<span
class="bg-body-color m-2 inline-block rounded-full py-1 px-3 text-sm font-semibold text-white"
>
Gray
</span>
<span
class="border-body-color text-body-color m-2 inline-block rounded-full border py-1 px-3 text-sm font-semibold"
>
Gray
</span>
<span class="border-body-color bg-body-color text-body-color m-2 inline-block rounded-full border bg-opacity-5 py-1 px-3 text-sm font-semibold">
Gray
</span>
<span class="border-body-color bg-body-color text-body-color m-2 inline-block rounded border bg-opacity-5 py-1 px-2 text-sm font-semibold">
Gray
</span>
<span
class="bg-light m-2 inline-block rounded py-1 px-2 text-sm font-semibold text-black"
>
Light
</span>
<span
class="border-light m-2 inline-block rounded border py-1 px-2 text-sm font-semibold text-black"
>
Light
</span>
<span
class="bg-light m-2 inline-block rounded-full py-1 px-3 text-sm font-semibold text-black"
>
Light
</span>
<span
class="border-light m-2 inline-block rounded-full border py-1 px-3 text-sm font-semibold text-black"
>
Light
</span>
<span class="border-body-color bg-stroke m-2 inline-block rounded-full border bg-opacity-5 py-1 px-3 text-sm font-semibold text-black">
Light
</span>
<span class="border-body-color bg-stroke m-2 inline-block rounded border bg-opacity-5 py-1 px-2 text-sm font-semibold text-black">
Light
</span>
<span
class="bg-danger m-2 inline-block rounded py-1 px-2 text-sm font-semibold text-white"
>
Danger
</span>
<span
class="border-danger text-danger m-2 inline-block rounded border py-1 px-2 text-sm font-semibold"
>
Danger
</span>
<span
class="bg-danger m-2 inline-block rounded-full py-1 px-3 text-sm font-semibold text-white"
>
Danger
</span>
<span
class="border-danger text-danger m-2 inline-block rounded-full border py-1 px-3 text-sm font-semibold"
>
Danger
</span>
<span class="border-danger bg-danger text-danger m-2 inline-block rounded-full border bg-opacity-5 py-1 px-3 text-sm font-semibold">
Danger
</span>
<span class="border-danger bg-danger text-danger m-2 inline-block rounded border bg-opacity-5 py-1 px-2 text-sm font-semibold">
Danger
</span>
<span
class="bg-info m-2 inline-block rounded py-1 px-2 text-sm font-semibold text-white"
>
Info
</span>
<span
class="border-info text-info m-2 inline-block rounded border py-1 px-2 text-sm font-semibold"
>
Info
</span>
<span
class="bg-info m-2 inline-block rounded-full py-1 px-3 text-sm font-semibold text-white"
>
Info
</span>
<span
class="border-info text-info m-2 inline-block rounded-full border py-1 px-3 text-sm font-semibold"
>
Info
</span>
<span class="border-info bg-info text-info m-2 inline-block rounded-full border bg-opacity-5 py-1 px-3 text-sm font-semibold">
Info
</span>
<span class="border-info bg-info text-info m-2 inline-block rounded border bg-opacity-5 py-1 px-2 text-sm font-semibold">
Info
</span>
<span
class="bg-secondary m-2 inline-block rounded py-1 px-2 text-sm font-semibold text-white"
>
Secondary
</span>
<span
class="border-secondary text-secondary m-2 inline-block rounded border py-1 px-2 text-sm font-semibold"
>
Secondary
</span>
<span
class="bg-secondary m-2 inline-block rounded-full py-1 px-3 text-sm font-semibold text-white"
>
Secondary
</span>
<span
class="border-secondary text-secondary m-2 inline-block rounded-full border py-1 px-3 text-sm font-semibold"
>
Secondary
</span>
<span class="border-secondary bg-secondary text-secondary m-2 inline-block rounded-full border bg-opacity-5 py-1 px-3 text-sm font-semibold">
Secondary
</span>
<span class="border-secondary bg-secondary text-secondary m-2 inline-block rounded border bg-opacity-5 py-1 px-2 text-sm font-semibold">
Secondary
</span>
<span
class="bg-success m-2 inline-block rounded py-1 px-2 text-sm font-semibold text-white"
>
Success
</span>
<span
class="border-success text-success m-2 inline-block rounded border py-1 px-2 text-sm font-semibold"
>
Success
</span>
<span
class="bg-success m-2 inline-block rounded-full py-1 px-3 text-sm font-semibold text-white"
>
Success
</span>
<span
class="border-success text-success m-2 inline-block rounded-full border py-1 px-3 text-sm font-semibold"
>
Success
</span>
<span class="border-success bg-success text-success m-2 inline-block rounded-full border bg-opacity-5 py-1 px-3 text-sm font-semibold">
Success
</span>
<span class="border-success bg-success text-success m-2 inline-block rounded border bg-opacity-5 py-1 px-2 text-sm font-semibold">
Success
</span>