DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Tailwind CSS 3 Badges Example
larainfo
larainfo

Posted on • Originally published at larainfo.com

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

Top comments (0)

Create an Account!
Now it's your turn!
Β 
πŸ—’ Share a tutorial
πŸ€” Reflect on your coding journey
❓ Ask a question

Create an account to join hundreds of thousands of DEV members on their journey.