Tags (badges)

Tags are used to tag a product, article, or any other kind of item.

Simple

Screen Size:

<div class="mb-4 px-2 w-full">
  <div class="mb-4 text-center">
    <span class="text-gray-500 bg-gray-200 h-10 rounded px-2 py-1 text-xs select-none">
      Info
    </span>
  </div>

  <div class="mb-4 text-center">
    <span class="text-teal-500 bg-teal-200 h-10 rounded px-2 py-1 text-xs select-none">
      Success
    </span>
  </div>

  <div class="mb-4 text-center">
    <span class="text-red-500 bg-red-200 h-10 rounded px-2 py-1 text-xs select-none">
      Danger
    </span>
  </div>

  <div class="mb-4 text-center">
    <span class="text-orange-500 bg-orange-200 h-10 rounded px-2 py-1 text-xs select-none">
      Warning
    </span>
  </div>
</div>

Rounded

Screen Size:

<div class="mb-4 px-2 w-full">
  <div class="mb-4 text-center">
    <span class="text-gray-500 bg-gray-200 h-10 rounded-full px-3 py-1 text-xs select-none">
      Info
    </span>
  </div>

  <div class="mb-4 text-center">
    <span class="text-teal-500 bg-teal-200 h-10 rounded-full px-3 py-1 text-xs select-none">
      Success
    </span>
  </div>

  <div class="mb-4 text-center">
    <span class="text-red-500 bg-red-200 h-10 rounded-full px-3 py-1 text-xs select-none">
      Danger
    </span>
  </div>

  <div class="mb-4 text-center">
    <span class="text-orange-500 bg-orange-200 h-10 rounded-full px-3 py-1 text-xs select-none">
      Warning
    </span>
  </div>
</div>

With close button

Screen Size:

<div class="mb-4 px-2 w-full">
  <div class="mb-4 text-center">
    <span class="bg-gray-200 h-6 rounded px-2 py-4 select-none inline-flex items-center justify-between">
      <span class="text-gray-600 text-sm">Info</span>
      <span class="cursor-pointer hover:bg-gray-600 bg-gray-500 text-gray-300 rounded-full inline-flex text-xs w-4 h-4 items-center justify-center ml-2">&#10005;</span>
    </span>
  </div>

  <div class="mb-4 text-center">
    <span class="bg-teal-200 h-6 rounded px-2 py-4 select-none inline-flex items-center justify-between">
      <span class="text-teal-600 text-sm">Success</span>
      <span class="cursor-pointer hover:bg-teal-600 bg-teal-500 text-gray-300 rounded-full inline-flex text-xs w-4 h-4 items-center justify-center ml-2">&#10005;</span>
    </span>
  </div>

  <div class="mb-4 text-center">
    <span class="bg-red-200 h-6 rounded px-2 py-4 select-none inline-flex items-center justify-between">
      <span class="text-red-600 text-sm">Danger</span>
      <span class="cursor-pointer hover:bg-red-600 bg-red-500 text-gray-300 rounded-full inline-flex text-xs w-4 h-4 items-center justify-center ml-2">&#10005;</span>
    </span>
  </div>

  <div class="mb-4 text-center">
    <span class="bg-orange-200 h-6 rounded px-2 py-4 select-none inline-flex items-center justify-between">
      <span class="text-orange-600 text-sm">Warnings</span>
      <span class="cursor-pointer hover:bg-orange-600 bg-orange-500 text-gray-300 rounded-full inline-flex text-xs w-4 h-4 items-center justify-center ml-2">&#10005;</span>
    </span>
  </div>
</div>

tags with close button in different colors

Screen Size:

<div>
  <div class="mb-4 px-2 w-full">
    <div class="mb-4 px-2 w-full">
      <div class="flex text-xs select-none">
        <div class="bg-gray-200 text-gray-600 px-2 py-1 rounded-l">test-tag</div>
        <div class="bg-gray-300 hover:bg-gray-400 text-gray-600 flex items-center px-2 rounded-r border-l cursor-pointer">
          &#10005;
        </div>
      </div>
    </div>

    <div class="mb-4 px-2 w-full">
      <div class="flex text-xs select-none">
        <div class="bg-blue-600 text-blue-100 px-2 py-1 rounded-l">test-tag</div>
        <div class="bg-gray-300 hover:bg-gray-400 text-gray-600 flex items-center px-2 rounded-r border-l cursor-pointer">
          &#10005;
        </div>
      </div>
    </div>

    <div class="mb-4 px-2 w-full">
      <div class="flex text-xs select-none">
        <div class="bg-red-600 text-red-100 px-2 py-1 rounded-l">test-tag</div>
        <div class="bg-gray-300 hover:bg-gray-400 text-gray-600 flex items-center px-2 rounded-r border-l cursor-pointer">
          &#10005;
        </div>
      </div>
    </div>

    <div class="mb-4 px-2 w-full">
      <div class="flex text-xs select-none">
        <div class="bg-indigo-600 text-indigo-100 px-2 py-1 rounded-l">test-tag</div>
        <div class="bg-gray-300 hover:bg-gray-400 text-gray-600 flex items-center px-2 rounded-r border-l cursor-pointer">
          &#10005;
        </div>
      </div>
    </div>

    <div class="mb-4 px-2 w-full">
      <div class="flex text-xs select-none">
        <div class="bg-green-600 text-green-100 px-2 py-1 rounded-l">test-tag</div>
        <div class="bg-gray-300 hover:bg-gray-400 text-gray-600 flex items-center px-2 rounded-r border-l cursor-pointer">
          &#10005;
        </div>
      </div>
    </div>

    <div class="mb-4 px-2 w-full">
      <div class="flex text-xs select-none">
        <div class="bg-teal-600 text-teal-100 px-2 py-1 rounded-l">test-tag</div>
        <div class="bg-gray-300 hover:bg-gray-400 text-gray-600 flex items-center px-2 rounded-r border-l cursor-pointer">
          &#10005;
        </div>
      </div>
    </div>

    <div class="mb-4 px-2 w-full">
      <div class="flex text-xs select-none">
        <div class="bg-orange-500 text-orange-100 px-2 py-1 rounded-l">test-tag</div>
        <div class="bg-gray-300 hover:bg-gray-400 text-gray-600 flex items-center px-2 rounded-r border-l cursor-pointer">
          &#10005;
        </div>
      </div>
    </div>

    <div class="mb-4 px-2 w-full">
      <div class="flex text-xs select-none">
        <div class="bg-yellow-500 text-black px-2 py-1 rounded-l">test-tag</div>
        <div class="bg-gray-300 hover:bg-gray-400 text-gray-600 flex items-center px-2 rounded-r border-l cursor-pointer">
          &#10005;
        </div>
      </div>
    </div>
  </div>
</div>

Designed and built with ♥ by Saleh Mir. Licensed under the MIT License.