DEV Community

Cover image for Tailwind CSS 3 Badges Example
saim
saim

Posted on โ€ข Originally published at larainfo.com

2

Tailwind CSS 3 Badges Example

In this section we will create badges with tailwind css 3. We will create badges with shadow, badges ring style with Tailwind CSS 3.

Example 1

tailwind v3 simple and circle badge.



<div class="space-x-4">
    <span class="px-3 py-1.5 text-xs text-slate-800 bg-slate-100 rounded"> Badge</span>
    <span class="px-3 py-1.5 text-xs text-purple-800 bg-purple-100 rounded-full"> Badge</span>
    <span class="px-3 py-1.5 text-xs text-cyan-800 bg-cyan-100 rounded-full"> Badge</span>
</div>


Enter fullscreen mode Exit fullscreen mode

tailwind v3 badge

tailwind v3 badge with border style.



<div class="space-x-4">
    <span class="px-3 py-1.5 text-xs border border-slate-400 text-slate-800 bg-slate-100 rounded"> Badge</span>
    <span class="px-3 py-1.5 text-xs text-purple-800 bg-purple-100 border border-purple-400 rounded-full"> Badge</span>
    <span class="px-3 py-1.5 text-xs text-cyan-800 bg-cyan-100 rounded-full border border-cyan-400"> Badge</span>
</div>


Enter fullscreen mode Exit fullscreen mode

tailwind v3 badge with border

Example 2

tailwind v3 badge with ring style.



<div class="space-x-4">
    <span class="px-3 py-1.5 text-xs ring-2 text-slate-800 bg-slate-100 rounded"> Badge</span>
    <span class="px-3 py-1.5 text-xs ring-2 ring-purple-500 text-purple-800 bg-purple-100 rounded-full"> Badge</span>
    <span class="px-3 py-1.5 text-xs ring-2 ring-cyan-500 text-cyan-800 bg-cyan-100 rounded-full"> Badge</span>
</div>


Enter fullscreen mode Exit fullscreen mode

tailwind badge ring

tailwind v3 badge with shadow style.



<div class="space-x-4">
    <span class="px-3 py-1.5 text-xs shadow shadow-slate-500/50 text-slate-800 bg-slate-100 rounded"> Badge</span>
    <span class="px-3 py-1.5 text-xs shadow shadow-purple-500 text-purple-800 bg-purple-100 rounded-full"> Badge</span>
    <span class="px-3 py-1.5 text-xs shadow-lg shadow-cyan-500/40 text-cyan-800 bg-cyan-100 rounded-full"> Badge</span>
</div>


Enter fullscreen mode Exit fullscreen mode

tailwind v3 badge shadow

Buy Me A Coffee

Read Also

๐Ÿ‘‰ Tailwind CSS Halloween Buttons Tutorial Example

๐Ÿ‘‰ Tailwind CSS List Style Marker Example

๐Ÿ‘‰ Create a Google Clone UI using Tailwind CSS

๐Ÿ‘‰ Tailwind CSS Use Custom Fonts Example

๐Ÿ‘‰ Tailwind CSS Line Chart Example

๐Ÿ‘‰ Tailwind CSS Gradient Button Example

๐Ÿ‘‰ Tailwind CSS Text Gradient Example

๐Ÿ‘‰ Tailwind CSS Simple POST CRUD UI Example

๐Ÿ‘‰ Tailwind CSS Thank You Page Example

๐Ÿ‘‰ Tailwind CSS 3 Breadcrumb Example

๐Ÿ‘‰ Tailwind CSS 3D Button Example

๐Ÿ‘‰ How to Use Custom Colors in Tailwind CSS

๐Ÿ‘‰ How to Use Strike Tag (cut text) in Tailwind CSS

๐Ÿ‘‰ Tailwind CSS Headings Typography Examples

๐Ÿ‘‰ Tailwind CSS Product List Example

๐Ÿ‘‰ How to Center a Div in Tailwind CSS

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadogโ€™s testing tunnel.

Download The Guide

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more