Tailwind chips

Responsive chips built with the latest Tailwind. Chips (aka tags) make it easier to categorize content and browse ie. through different articles from the same category.


Basic

Hello! Hello! Hello! A Hello! Hello! Hello! Hello! Hello! Hello!
  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
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<div class="flex flex-wrap justify-center">
  <span
    class="flex justify-center items-center m-1 font-medium py-1 px-2 bg-white rounded-full text-gray-700 bg-gray-100 border border-gray-300"
  >
    <span class="text-xs font-normal leading-none max-w-full flex-initial"
      >Hello!</span
    >
  </span>
  <span
    class="flex justify-center items-center m-1 font-medium py-1 px-2 bg-white rounded-full text-blue-700 bg-blue-100 border border-blue-300"
  >
    <span class="text-xs font-normal leading-none max-w-full flex-initial"
      >Hello!</span
    >
  </span>
  <span
    class="flex justify-center items-center m-1 font-medium py-1 px-2 bg-white rounded-full text-pink-700 bg-pink-100 border border-pink-300"
  >
    <span class="text-xs font-normal leading-none max-w-full flex-initial"
      >Hello!</span
    >
  </span>
  <span
    class="flex justify-center items-center m-1 font-medium py-1 px-2 bg-white rounded-full text-purple-700 bg-purple-100 border border-purple-300"
  >
    <span slot="avatar">
      <span
        class="flex relative w-4 h-4 bg-orange-500 justify-center items-center m-1 mr-2 ml-0 my-0 text-xs rounded-full"
        ><img
          class="rounded-full"
          alt="A"
          src="https://randomuser.me/api/portraits/women/68.jpg"
        />
      </span>
    </span>
    <span
      class="text-xs font-normal leading-none max-w-full flex-initial"
    >
      Hello!</span
    >
  </span>
  <span
    class="flex justify-center items-center m-1 font-medium py-1 px-2 bg-white rounded-full text-red-100 bg-red-700 border border-red-700"
  >
    <span class="text-xs font-normal leading-none max-w-full flex-initial"
      >Hello!</span
    >
  </span>
  <span
    class="flex justify-center items-center m-1 font-medium py-1 px-2 bg-white rounded-full text-orange-100 bg-orange-700 border border-orange-700"
  >
    <span class="text-xs font-normal leading-none max-w-full flex-initial"
      >Hello!</span
    >
  </span>
  <span
    class="flex justify-center items-center m-1 font-medium py-1 px-2 bg-white rounded-full text-green-700 bg-green-100 border border-green-300"
  >
    <span class="text-xs font-normal leading-none max-w-full flex-initial"
      >Hello!</span
    >
  </span>
  <span
    class="flex justify-center items-center m-1 font-medium py-1 px-2 bg-white rounded-full text-indigo-100 bg-indigo-700 border border-indigo-700"
  >
    <span class="text-xs font-normal leading-none max-w-full flex-initial"
      >Hello!</span
    >
    <span class="flex flex-auto flex-row-reverse">
      <span>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="100%"
          height="100%"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="feather feather-x cursor-pointer hover:text-indigo-400 rounded-full w-4 h-4 ml-2"
        >
          <line x1="18" y1="6" x2="6" y2="18"></line>
          <line x1="6" y1="6" x2="18" y2="18"></line>
        </svg>
      </span>
    </span>
  </span>
  <span
    class="flex justify-center items-center m-1 font-medium py-1 px-2 bg-white rounded-full text-yellow-100 bg-yellow-700 border border-yellow-700"
  >
    <span slot="avatar">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="100%"
        height="100%"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="feather feather-heart w-3 mr-1"
      >
        <path
          d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
        ></path>
      </svg>
    </span>
    <span
      class="text-xs font-normal leading-none max-w-full flex-initial"
    >
      Hello!</span
    >
    <span class="flex flex-auto flex-row-reverse">
      <span>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="100%"
          height="100%"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="feather feather-x cursor-pointer hover:text-yellow-400 rounded-full w-4 h-4 ml-2"
        >
          <line x1="18" y1="6" x2="6" y2="18"></line>
          <line x1="6" y1="6" x2="18" y2="18"></line>
        </svg>
      </span>
    </span>
  </span>
</div>

Chips large 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 A Hello Hello Hello
 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
45
46
47
48
<div class="p-4">
  <span class="px-4 py-2 text-base rounded-full text-white bg-purple-500">
    Hello
  </span>

  <span class="mx-4 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>
  <span class="mx-4 py-2 pr-2 text-base rounded-full text-white bg-purple-500">
    <img
      class="rounded-full inline-block w-10 h-10 pb-1"
      alt="A"
      src="https://randomuser.me/api/portraits/women/68.jpg"
    />

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

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

  <span
    class="px-4 py-2 text-base rounded-full text-purple-500 border border-purple-500 undefined"
  >
    Hello
    <button class="bg-transparent hover">
      <i class="fas fa-times ml-3"></i>
    </button>
  </span>
</div>