Tailwind CSS 3 Badges Example
Tags: tailwindcss, webdev, tutorial
Published: 2022-10-18 04:45:12

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.
```html
<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>
```


![tailwind v3 badge](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/88zx1owa8hmxs5ans3it.png)

tailwind v3 badge with border style.
```html
<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>
```

![tailwind v3 badge with border](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fpz13jr4wtb8nfevuj5f.png)


### Example 2
tailwind v3 badge with ring style.

```html
<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>
```


![tailwind badge ring](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8wc4ebb31fnyothatlty.png)

tailwind v3 badge with shadow style.
```html
<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>
```

![tailwind v3 badge shadow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ik9vhigb0wjs6ftjod3v.png)

[![Buy Me A Coffee](https://demo.larainfo.com/images/help-me-to-buy-a-laptop.png)](https://www.buymeacoffee.com/same6)


### Read Also
👉 [Tailwind CSS Halloween Buttons Tutorial Example](https://larainfo.com/blogs/tailwind-css-halloween-buttons-tutorial-example)

👉 [Tailwind CSS List Style Marker Example](https://larainfo.com/blogs/tailwind-css-list-style-marker-example)

👉 [Create a Google Clone UI using Tailwind CSS](https://larainfo.com/blogs/create-a-google-clone-ui-using-tailwind-css)

👉 [Tailwind CSS Use Custom Fonts Example](https://larainfo.com/blogs/tailwind-css-use-custom-fonts-example)

👉 [Tailwind CSS Line Chart Example](https://larainfo.com/blogs/tailwind-css-line-chart-example)

👉 [Tailwind CSS Gradient Button Example](https://larainfo.com/blogs/tailwind-css-gradient-button-example)

👉 [Tailwind CSS Text Gradient Example](https://larainfo.com/blogs/tailwind-css-text-gradient-example)

👉 [Tailwind CSS Simple POST CRUD UI Example](https://larainfo.com/blogs/tailwind-css-simple-post-crud-ui-example)

👉 [Tailwind CSS Thank You Page Example](https://larainfo.com/blogs/tailwind-css-thank-you-page-example)

👉 [Tailwind CSS 3 Breadcrumb Example](https://larainfo.com/blogs/tailwind-css-3-breadcrumb-example)

👉 [Tailwind CSS 3D Button Example](https://larainfo.com/blogs/tailwind-css-3d-button-example)

👉 [How to Use Custom Colors in Tailwind CSS](https://larainfo.com/blogs/how-to-use-custom-colors-in-tailwind-css)

👉 [How to Use Strike Tag (cut text) in Tailwind CSS](https://larainfo.com/blogs/how-to-use-strike-tag-cut-text-in-tailwind-css)

👉 [Tailwind CSS Headings Typography Examples](https://larainfo.com/blogs/tailwind-css-headings-typography-examples)

👉 [Tailwind CSS Product List Example](https://larainfo.com/blogs/tailwind-css-product-list-example)

👉 [How to Center a Div in Tailwind CSS](https://larainfo.com/blogs/how-to-center-a-div-in-tailwind-css)