Tailwind CSS Badge Examples

In this section we will see few tailwind CSS badge examples. badge is use show status, message,notification, inbox etc .

Tailwind CSS Badge Examples

? View Demo

Setup Project
Using CDN

<link href=”https://unpkg.com/tailwindcss@^2/dis…


This content originally appeared on DEV Community and was authored by larainfo

In this section we will see few tailwind CSS badge examples. badge is use show status, message,notification, inbox etc .

Tailwind CSS Badge Examples

? View Demo

Setup Project
Using CDN

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

or

The Easiest way to install Tailwind CSS with Tailwind CLI

How to Install Tailwind CSS with NPM

Simple Badge 

<span class="text-xs px-2 py-0.5 font-bold bg-gray-100 text-gray-600 rounded">
    Default
</span>
<span class="px-2 py-0.5 text-xs font-bold bg-red-500 text-white rounded">
    Danger
</span>


<span class="px-2 py-0.5 text-xs font-bold bg-yellow-300 text-black rounded">
    Warning
</span>
<span class="text-xs px-2 py-0.5 rounded font-bold bg-green-500 text-white ">
    Success
</span>


<span class="text-xs px-2 font-bold bg-blue-500 text-white rounded py-0.5">
    info
</span>

Alt Text

Button with Badge 

<button type="button" class="px-4 py-2 mr-2 text-white bg-blue-500 rounded">Button <span
        class="px-2 py-1 text-sm text-black bg-white rounded-full">9</span></button>

Alt Text

Icon with Badge 

<span class="relative inline-block">
    <svg xmlns="http://www.w3.org/2000/svg" class="w-16 h-16 text-gray-200" fill="none" viewBox="0 0 24 24"
        stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
    </svg>
    <span
        class="absolute top-0 right-0 px-2 py-1 text-xs font-bold leading-none text-red-100 transform bg-red-600 rounded-full">9</span>
</span>

Alt Text

? For more tailwind css


This content originally appeared on DEV Community and was authored by larainfo


Print Share Comment Cite Upload Translate Updates
APA

larainfo | Sciencx (2021-07-21T19:38:30+00:00) Tailwind CSS Badge Examples. Retrieved from https://www.scien.cx/2021/07/21/tailwind-css-badge-examples/

MLA
" » Tailwind CSS Badge Examples." larainfo | Sciencx - Wednesday July 21, 2021, https://www.scien.cx/2021/07/21/tailwind-css-badge-examples/
HARVARD
larainfo | Sciencx Wednesday July 21, 2021 » Tailwind CSS Badge Examples., viewed ,<https://www.scien.cx/2021/07/21/tailwind-css-badge-examples/>
VANCOUVER
larainfo | Sciencx - » Tailwind CSS Badge Examples. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/07/21/tailwind-css-badge-examples/
CHICAGO
" » Tailwind CSS Badge Examples." larainfo | Sciencx - Accessed . https://www.scien.cx/2021/07/21/tailwind-css-badge-examples/
IEEE
" » Tailwind CSS Badge Examples." larainfo | Sciencx [Online]. Available: https://www.scien.cx/2021/07/21/tailwind-css-badge-examples/. [Accessed: ]
rf:citation
» Tailwind CSS Badge Examples | larainfo | Sciencx | https://www.scien.cx/2021/07/21/tailwind-css-badge-examples/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts