Tailwind badges

Responsive Badges built with the latest Tailwind. Badges add extra information like count or label to any content. Use counters, icons, or labels. Many examples and easy tutorial.


Basic

Badge Badge Badge Badge Badge Badge Badge Badge
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<div class="flex space-x-2">
  <span
    class="text-xs px-2 font-medium bg-gray-500 bg-opacity-10 text-gray-800 rounded py-0.5"
  >
    Badge
  </span>
  <span
    class="text-xs px-2 font-medium bg-red-500 bg-opacity-10 text-red-800 rounded py-0.5"
  >
    Badge
  </span>

  <span
    class="text-xs px-2 font-medium bg-yellow-500 bg-opacity-10 text-yellow-800 rounded py-0.5"
  >
    Badge
  </span>
  <span
    class="text-xs px-2 font-medium bg-green-500 bg-opacity-10 text-green-800 rounded py-0.5"
  >
    Badge
  </span>

  <span
    class="text-xs px-2 font-medium bg-blue-500 bg-opacity-10 text-blue-800 rounded py-0.5"
  >
    Badge
  </span>
  <span
    class="text-xs px-2 font-medium bg-purple-500 bg-opacity-10 text-purple-800 rounded py-0.5"
  >
    Badge
  </span>
  <span
    class="text-xs px-2 font-medium bg-indigo-500 bg-opacity-10 text-indigo-800 rounded py-0.5"
  >
    Badge
  </span>
  <span
    class="text-xs px-2 font-medium bg-pink-500 bg-opacity-10 text-pink-800 rounded py-0.5"
  >
    Badge
  </span>
</div>

Basic badges with solid color

Badge Badge Badge Badge Badge Badge Badge Badge
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<div class="flex space-x-2">
  <span
    class="text-xs px-2 font-medium bg-gray-500 text-white rounded py-0.5"
  >
    Badge
  </span>
  <span
    class="text-xs px-2 font-medium bg-red-500 text-white rounded py-0.5"
  >
    Badge
  </span>

  <span
    class="text-xs px-2 font-medium bg-yellow-500 text-white rounded py-0.5"
  >
    Badge
  </span>
  <span
    class="text-xs px-2 font-medium bg-green-500 text-white rounded py-0.5"
  >
    Badge
  </span>

  <span
    class="text-xs px-2 font-medium bg-blue-500 text-white rounded py-0.5"
  >
    Badge
  </span>
  <span
    class="text-xs px-2 font-medium bg-purple-500 text-white rounded py-0.5"
  >
    Badge
  </span>
  <span
    class="text-xs px-2 font-medium bg-indigo-500 text-white rounded py-0.5"
  >
    Badge
  </span>
  <span
    class="text-xs px-2 font-medium bg-pink-500 text-white rounded py-0.5"
  >
    Badge
  </span>
</div>

Pills with solid color

Badge Badge Badge Badge Badge Badge Badge Badge
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<div class="flex space-x-2">
  <span
    class="text-xs px-2 font-medium bg-gray-500 text-white rounded-full py-0.5"
  >
    Badge
  </span>
  <span
    class="text-xs px-2 font-medium bg-red-500 text-white rounded-full py-0.5"
  >
    Badge
  </span>

  <span
    class="text-xs px-2 font-medium bg-yellow-500 text-white rounded-full py-0.5"
  >
    Badge
  </span>
  <span
    class="text-xs px-2 font-medium bg-green-500 text-white rounded-full py-0.5"
  >
    Badge
  </span>

  <span
    class="text-xs px-2 font-medium bg-blue-500 text-white rounded-full py-0.5"
  >
    Badge
  </span>
  <span
    class="text-xs px-2 font-medium bg-purple-500 text-white rounded-full py-0.5"
  >
    Badge
  </span>
  <span
    class="text-xs px-2 font-medium bg-indigo-500 text-white rounded-full py-0.5"
  >
    Badge
  </span>
  <span
    class="text-xs px-2 font-medium bg-pink-500 text-white rounded-full py-0.5"
  >
    Badge
  </span>
</div>

Pills large with solid color

Badge Badge Badge Badge Badge Badge Badge Badge
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<div class="flex space-x-2">
  <span
    class="text-xs px-3 font-medium text-base bg-gray-500 text-white rounded-full py-1.5"
  >
    Badge
  </span>
  <span
    class="text-xs px-3 font-medium text-base bg-red-500 text-white rounded-full py-1.5"
  >
    Badge
  </span>

  <span
    class="text-xs px-3 font-medium text-base bg-yellow-500 text-white rounded-full py-1.5"
  >
    Badge
  </span>
  <span
    class="text-xs px-3 font-medium text-base bg-green-500 text-white rounded-full py-1.5"
  >
    Badge
  </span>

  <span
    class="text-xs px-3 font-medium text-base bg-blue-500 text-white rounded-full py-1.5"
  >
    Badge
  </span>
  <span
    class="text-xs px-3 font-medium text-base bg-purple-500 text-white rounded-full py-1.5"
  >
    Badge
  </span>
  <span
    class="text-xs px-3 font-medium text-base bg-indigo-500 text-white rounded-full py-1.5"
  >
    Badge
  </span>
  <span
    class="text-xs px-3 font-medium text-base bg-pink-500 text-white rounded-full py-1.5"
  >
    Badge
  </span>
</div>

Variations

Hello Hello Hello
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<span class="px-4 py-2 text-base rounded-full text-white bg-purple-500">
  Hello
</span>

<span class="mx-3 px-4 py-2 text-base rounded-full text-white bg-purple-500">
  Hello
  <button class="bg-transparent hover">
    <i class="fas fa-times ml-3"></i>
  </button>
</span>
<span class="px-4 py-2 text-base rounded-full text-white bg-purple-500">
  <i class="fab fa-facebook-f mr-3"></i>

  Hello
  <button class="bg-transparent hover">
    <i class="fas fa-times ml-3"></i>
  </button>
</span>

Outline

Hello
1
2
3
4
5
<span
class="px-4 py-2 text-base rounded-full text-purple-500 border border-purple-500 undefined"
>
Hello
</span>