An Interest In:
Web News this Week
- February 29, 2024
- February 28, 2024
- February 27, 2024
- February 26, 2024
- February 25, 2024
- February 24, 2024
- February 23, 2024
July 21, 2021 07:38 pm GMT
Original Link: https://dev.to/larainfo/tailwind-css-badge-examples-3deh
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
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>
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>
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>
Original Link: https://dev.to/larainfo/tailwind-css-badge-examples-3deh
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To