badges

<section>
  <div class="px-8 py-12 mx-auto md:px-12 lg:px-24 max-w-7xl">
    <div class="flex flex-wrap gap-2">
      <span
        class="rounded-full bg-gray-50 px-2.5 py-1 text-xs font-medium text-gray-600"
        >Gray</span
      >
      <span
        class="rounded-full bg-red-50 px-2.5 py-1 text-xs font-medium text-red-600"
        >Red</span
      >
      <span
        class="rounded-full bg-orange-50 px-2.5 py-1 text-xs font-medium text-orange-600"
        >Orange</span
      >
      <span
        class="rounded-full bg-amber-50 px-2.5 py-1 text-xs font-medium text-amber-600"
        >Amber</span
      >
      <span
        class="rounded-full bg-yellow-50 px-2.5 py-1 text-xs font-medium text-yellow-600"
        >Yellow</span
      >
      <span
        class="rounded-full bg-lime-50 px-2.5 py-1 text-xs font-medium text-lime-600"
        >Lime</span
      >
      <span
        class="rounded-full bg-green-50 px-2.5 py-1 text-xs font-medium text-green-600"
        >Green</span
      >
      <span
        class="rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-medium text-emerald-600"
        >Emerald</span
      >
      <span
        class="rounded-full bg-teal-50 px-2.5 py-1 text-xs font-medium text-teal-600"
        >Teal</span
      >
      <span
        class="rounded-full bg-cyan-50 px-2.5 py-1 text-xs font-medium text-cyan-600"
        >Cyan</span
      >
      <span
        class="rounded-full bg-sky-50 px-2.5 py-1 text-xs font-medium text-sky-600"
        >Sky</span
      >
      <span
        class="rounded-full bg-blue-50 px-2.5 py-1 text-xs font-medium text-blue-600"
        >Blue</span
      >
      <span
        class="rounded-full bg-indigo-50 px-2.5 py-1 text-xs font-medium text-indigo-600"
        >Indigo</span
      >
      <span
        class="rounded-full bg-violet-50 px-2.5 py-1 text-xs font-medium text-violet-600"
        >Violet</span
      >
      <span
        class="rounded-full bg-purple-50 px-2.5 py-1 text-xs font-medium text-purple-600"
        >Purple</span
      >
      <span
        class="rounded-full bg-fuchsia-50 px-2.5 py-1 text-xs font-medium text-fuchsia-600"
        >Fuchsia</span
      >
      <span
        class="rounded-full bg-pink-50 px-2.5 py-1 text-xs font-medium text-pink-600"
        >Pink</span
      >
      <span
        class="rounded-full bg-rose-50 px-2.5 py-1 text-xs font-medium text-rose-600"
        >Rose</span
      >
    </div>
  </div>
</section>