Example

Example badge for heading element.

Example heading New

			                
			                  <h1 class="text-4xl leading-normal mb-2">Example heading <span class="inline-block leading-none text-center py-1 px-2 bg-indigo-500 text-gray-100 font-bold rounded" style="font-size: .75em;">New</span></h1>
			                  <h2 class="text-3xl leading-normal mb-2">Example heading <span class="inline-block leading-none text-center py-1 px-2 bg-indigo-500 text-gray-100 font-bold rounded" style="font-size: .75em;">New</span></h2>
			                  <h3 class="text-2xl leading-normal mb-2">Example heading <span class="inline-block leading-none text-center py-1 px-2 bg-indigo-500 text-gray-100 font-bold rounded" style="font-size: .75em;">New</span></h3>
			                  <h4 class="text-xl leading-normal mb-2">Example heading <span class="inline-block leading-none text-center py-1 px-2 bg-indigo-500 text-gray-100 font-bold rounded" style="font-size: .75em;">New</span></h4>
			                  <h5 class="text-lg leading-normal mb-2">Example heading <span class="inline-block leading-none text-center py-1 px-2 bg-indigo-500 text-gray-100 font-bold rounded" style="font-size: .75em;">New</span></h5>
			                  <h6 class="text-base leading-normal mb-2">Example heading <span class="inline-block leading-none text-center py-1 px-2 bg-indigo-500 text-gray-100 font-bold rounded" style="font-size: .75em;">New</span></h6>

Badge with colors

Primary Danger Warning Success Info Light Dark

			                
			                  <span class="inline-block leading-none text-center py-1 px-2 bg-indigo-500 text-gray-100 font-bold rounded" style="font-size: .75em;">Primary</span>
			                  <span class="inline-block leading-none text-center py-1 px-2 bg-red-700 text-gray-100 font-bold rounded" style="font-size: .75em;">Danger</span>
			                  <span class="inline-block leading-none text-center py-1 px-2 bg-yellow-300 text-gray-900 font-bold rounded" style="font-size: .75em;">Warning</span>
			                  <span class="inline-block leading-none text-center py-1 px-2 bg-green-700 text-gray-100 font-bold rounded" style="font-size: .75em;">Success</span>
			                  <span class="inline-block leading-none text-center py-1 px-2 bg-blue-400 text-gray-900 font-bold rounded" style="font-size: .75em;">Info</span>
			                  <span class="inline-block leading-none text-center py-1 px-2 bg-gray-100 text-gray-900 font-bold rounded" style="font-size: .75em;">Light</span>
			                  <span class="inline-block leading-none text-center py-1 px-2 bg-black text-gray-100 font-bold rounded" style="font-size: .75em;">Dark</span>

Pill Badge with colors

Primary Danger Warning Success Info Light Dark

			                
			                  <span class="inline-block leading-none text-center py-1 px-2 bg-indigo-500 text-gray-100 font-bold rounded-xl" style="font-size: .75em;">Primary</span>
			                  <span class="inline-block leading-none text-center py-1 px-2 bg-red-700 text-gray-100 font-bold rounded-xl" style="font-size: .75em;">Danger</span>
			                  <span class="inline-block leading-none text-center py-1 px-2 bg-yellow-300 text-gray-900 font-bold rounded-xl" style="font-size: .75em;">Warning</span>
			                  <span class="inline-block leading-none text-center py-1 px-2 bg-green-700 text-gray-100 font-bold rounded-xl" style="font-size: .75em;">Success</span>
			                  <span class="inline-block leading-none text-center py-1 px-2 bg-blue-400 text-gray-900 font-bold rounded-xl" style="font-size: .75em;">Info</span>
			                  <span class="inline-block leading-none text-center py-1 px-2 bg-gray-100 text-gray-900 font-bold rounded-xl" style="font-size: .75em;">Light</span>
			                  <span class="inline-block leading-none text-center py-1 px-2 bg-black text-gray-100 font-bold rounded-xl" style="font-size: .75em;">Dark</span>

Badge in button

Notifications 6

			                
			                  <a href="#" class="py-3 px-5 ltr:-ml-1 rtl:-mr-1 rounded leading-5 text-gray-100 bg-indigo-500 border border-indigo-600 hover:text-white hover:bg-indigo-600 hover:ring-0 hover:border-indigo-600 focus:bg-indigo-600 focus:border-indigo-600 focus:outline-none focus:ring-0">
			                    Notifications <span class="ml-2 inline-block leading-none text-center py-1 px-2 bg-gray-100 text-gray-900 font-bold rounded" style="font-size: .75em;">6</span>
			                  </a>