Tailwind Badge

Notification

notification

https://codepen.io/junchow/pen/yLeNZGw?editors=1000

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">

<div class="container mx-auto my-12 p-12 bg-gray-100">
  <a href="" class="m-2 sm:mt-0 px-4 py-2 border rounded-lg shadow-md text-lg text-gray-800 bg-gray-100 focus:text-gray-900 hover:text-gray-900 hover:bg-gray-300">
    <span class="mr-1 mb-3 px-2 py-1 rounded-full object-right-top bg-red-500 text-sm text-white">100</span>
    <span>消息</span>
  </a>
  
  <a href="" class="m-2 sm:mt-0 px-4 py-2 border rounded-lg shadow-md text-lg text-gray-800 bg-gray-100 focus:text-gray-900 hover:text-gray-900 hover:bg-gray-300">
    <span class="mr-1 mb-3 px-2 py-1 rounded-full object-right-top bg-green-500 text-sm text-white">100</span>
    <span>消息</span>
  </a>
  
  <a href="" class="m-2 sm:mt-0 px-4 py-2 border rounded-lg shadow-md text-lg text-gray-800 bg-gray-100 focus:text-gray-900 hover:text-gray-900 hover:bg-gray-300">
    <span class="mr-1 mb-3 px-2 py-1 rounded-full object-right-top bg-orange-500 text-sm text-white">100</span>
    <span>消息</span>
  </a>
  
  <a href="" class="m-2 sm:mt-0 px-4 py-2 border rounded-lg shadow-md text-lg text-gray-800 bg-gray-100 focus:text-gray-900 hover:text-gray-900 hover:bg-gray-300">
    <span class="mr-1 mb-3 px-2 py-1 rounded-full object-right-top bg-black text-sm text-white">100</span>
    <span>消息</span>
  </a>
</div>

Chip

chip

https://codepen.io/junchow/pen/GRoJzqN?editors=1000

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">

<div class="container mx-auto my-12 p-12 bg-gray-100 flex flex-row">
  <div class="flex justify-center items-center m-1 px-2 py-1 border border-gray-300 rounded-full bg-gray-200 text-base text-gray-700 font-medium">
    <div class="flex-initial max-w-full leading-none text-xs font-normal">名称</div>
  </div>
  <div class="flex justify-center items-center m-1 px-2 py-1 border border-red-300 rounded-full bg-red-200 text-base text-red-700 font-medium">
    <div class="flex-initial max-w-full leading-none text-xs font-normal">名称</div>
  </div>
  <div class="flex justify-center items-center m-1 px-2 py-1 rounded-full bg-red-700 text-base text-white font-medium">
    <div class="flex-initial max-w-full leading-none text-xs font-normal">名称</div>
  </div>
  <div class="flex justify-center items-center m-1 px-2 py-1 rounded-full bg-blue-700 text-base text-white font-medium">
    <img src="http://source.unsplash.com/100x100/?gril" class="rounded-full w-4 h-4 mr-1">
    <div class="flex-initial max-w-full leading-none text-xs font-normal">名称</div>
  </div>
  <div class="flex justify-center items-center m-1 px-2 py-1 rounded-full bg-orange-700 text-base text-white font-medium">
    <i class="fa fa-comment mr-1"></i>
    <div class="flex-initial max-w-full leading-none text-xs font-normal">名称</div>
  </div>
  <div class="flex justify-center items-center m-1 px-2 py-1 rounded-full bg-green-700 text-base text-white font-medium">
    <div class="flex-initial max-w-full leading-none text-xs font-normal">名称</div>
    <i class="fa fa-times ml-2 cursor-pointer"></i>
  </div>
</div>

Label Tag

label tag

https://codepen.io/junchow/pen/eYJNLxK?editors=1000

<div class="flex items-center flex-shrink-0 text-sm px-2">
    <div class="px-2 py-1 rounded-l-md bg-gray-200 text-gray-600 cursor-pointer">禁用</div>
    <div class="px-2 py-1 rounded-r-md bg-green-400 text-white cursor-pointer">启用</div>
</div>

Icon Badge

badge

<span class="mx-2 py-1 px-4 leading-loose rounded bg-gray-500 tracking-wider text-sm text-white font-semibold">
  <i class="fa fa-user" aria-hidden="true"></i>
  user
</span>

<span class="mx-2 py-1 px-4 leading-loose rounded bg-red-500 tracking-wider text-sm text-white font-semibold">
  <i class="fa fa-award" aria-hidden="true"></i>
  winner
</span>

<span class="mx-2 py-1 px-4 leading-loose rounded bg-green-500 tracking-wider text-sm text-white font-semibold">
  <i class="fa fa-star" aria-hidden="true"></i>
  star
</span>

<span class="mx-2 py-1 px-4 leading-loose rounded bg-blue-500 tracking-wider text-sm text-white font-semibold">
  <i class="fa fa-heart" aria-hidden="true"></i>
  star
</span>