Sildid

<div class="flex items-center gap-2">
  <span class="inline-flex items-center rounded bg-gray-50 p-2.5 font-medium text-gray-700">Märksõna</span>
  <span class="inline-flex items-center rounded bg-red-50 p-2.5 font-medium text-red-700">Märksõna</span>
  <span class="inline-flex items-center rounded bg-green-50 p-2.5 font-medium text-green-700">Märksõna</span>
  <span class="inline-flex items-center rounded bg-blue-50 p-2.5 font-medium text-blue-700">Märksõna</span>
</div>

<div class="flex items-center gap-2">
  <span class="inline-flex items-center rounded bg-gray-50 p-2.5 font-medium text-gray-700 gap-x-2">
    <svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
      <path d="M22 11V3H15V6H9V3H2V11H9V8H11V18H15V21H22V13H15V16H13V8H15V11H22ZM7 9H4V5H7V9ZM17 15H20V19H17V15ZM17 5H20V9H17V5Z"></path>
    </svg>
    Allüksus
  </span>
  <span class="inline-flex items-center rounded bg-gray-50 p-2.5 font-medium text-gray-700 gap-x-2">
    <svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
      <path d="M19 13H5V11H19V13Z"></path>
    </svg>
    Märksõna
    <svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
      <path d="M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z"></path>
    </svg>
  </span>
</div>

<div class="flex items-center gap-2">
  <span class="inline-flex items-center rounded bg-gray-50 p-2 text-sm font-medium text-gray-700">Märksõna</span>
  <span class="inline-flex items-center rounded bg-red-50 p-2 text-sm font-medium text-red-700">Märksõna</span>
  <span class="inline-flex items-center rounded bg-green-50 p-2 text-sm font-medium text-green-700">Märksõna</span>
  <span class="inline-flex items-center rounded bg-blue-50 p-2 text-sm font-medium text-blue-700">Märksõna</span>
</div>

<div class="flex items-center gap-2">
  <span class="inline-flex items-center rounded-full bg-gray-800 px-3 py-1.5 text-sm text-white">Tume</span>
  <span class="inline-flex items-center rounded-full bg-gray-500 px-3 py-1.5 text-sm text-white">Hall</span>
  <span class="inline-flex items-center rounded-full bg-gray-200 px-3 py-1.5 text-sm text-black">Hele</span>
  <span class="inline-flex items-center rounded-full bg-yellow-400 px-3 py-1.5 text-sm text-black">Hoiatus</span>
  <span class="inline-flex items-center rounded-full bg-red-400 px-3 py-1.5 text-sm text-black">Viga</span>
  <span class="inline-flex items-center rounded-full bg-green-300 px-3 py-1.5 text-sm text-black">Korras</span>
  <span class="inline-flex items-center rounded-full bg-blue-300 px-3 py-1.5 text-sm text-black">Info</span>
</div>

<div class="flex items-center gap-2">
  <span class="inline-flex items-center rounded-full bg-red-400 px-3 py-1.5 text-sm text-black gap-x-2">
    <svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
      <path d="M11 15h2v2h-2v-2zm0-8h2v6h-2V7zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path>
    </svg>
    Viga
  </span>
  <span class="inline-flex items-center rounded-full bg-green-300 px-3 py-1.5 text-sm text-black gap-x-2">
    Korras
    <svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
      <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4C7.58001 4 4.01001 7.58 4.01001 12C4.01001 16.42 7.58001 20 12 20C15.73 20 18.84 17.45 19.73 14H17.65C16.83 16.33 14.61 18 12 18C8.69001 18 6.00001 15.31 6.00001 12C6.00001 8.69 8.69001 6 12 6C13.66 6 15.14 6.69 16.22 7.78L13 11H20V4L17.65 6.35Z"></path>
    </svg>
  </span>
</div>