badges1

<section>
  <div class="px-8 py-24 mx-auto md:px-12 space-y-12 lg:px-24 max-w-7xl">
    <div class="flex flex-wrap gap-2 justify-center">
      <!-- XS Size -->
      <span
        class="inline-flex items-center font-medium relative text-white bg-base-900 px-2.5 py-1 text-xs rounded-md"
      >
        Default
      </span>
      <span
        class="inline-flex items-center font-medium relative text-white bg-accent-600 px-2.5 py-1 text-xs rounded-md"
      >
        Accent
      </span>
      <span
        class="inline-flex items-center font-medium relative text-base-500 bg-white ring-1 ring-base-200 px-2.5 py-1 text-xs rounded-md"
      >
        Alternative
      </span>
      <span
        class="inline-flex items-center font-medium relative text-base-700 bg-base-50 px-2.5 py-1 text-xs rounded-md"
      >
        Muted
      </span>
      <span
        class="inline-flex items-center font-medium relative text-base-500 bg-white px-2.5 py-1 text-xs rounded-md"
      >
        Text
      </span>
      <span
        class="inline-flex items-center font-medium relative text-accent-700 bg-accent-600/10 px-2.5 py-1 text-xs rounded-md"
      >
        Info
      </span>
      <span
        class="inline-flex items-center font-medium relative text-emerald-600 bg-emerald-600/10 px-2.5 py-1 text-xs rounded-md"
      >
        Success
      </span>
      <span
        class="inline-flex items-center font-medium relative text-amber-600 bg-amber-600/10 px-2.5 py-1 text-xs rounded-md"
      >
        Warning
      </span>
      <span
        class="inline-flex items-center font-medium relative text-rose-600 bg-rose-600/10 px-2.5 py-1 text-xs rounded-md"
      >
        Danger
      </span>
    </div>
    <!-- SM Size -->
    <div class="flex flex-wrap gap-2 justify-center">
      <span
        class="inline-flex items-center font-medium relative text-white bg-base-900 px-4 py-1.5 text-sm rounded-lg"
      >
        Default
      </span>
      <span
        class="inline-flex items-center font-medium relative text-white bg-accent-600 px-4 py-1.5 text-sm rounded-lg"
      >
        Accent
      </span>
      <span
        class="inline-flex items-center font-medium relative text-base-500 bg-white ring-1 ring-base-200 px-4 py-1.5 text-sm rounded-lg"
      >
        Alternative
      </span>
      <span
        class="inline-flex items-center font-medium relative text-base-700 bg-base-50 px-4 py-1.5 text-sm rounded-lg"
      >
        Muted
      </span>
      <span
        class="inline-flex items-center font-medium relative text-base-500 bg-white px-4 py-1.5 text-sm rounded-lg"
      >
        Text
      </span>
      <span
        class="inline-flex items-center font-medium relative text-accent-700 bg-accent-600/10 px-4 py-1.5 text-sm rounded-lg"
      >
        Info
      </span>
      <span
        class="inline-flex items-center font-medium relative text-emerald-600 bg-emerald-600/10 px-4 py-1.5 text-sm rounded-lg"
      >
        Success
      </span>
      <span
        class="inline-flex items-center font-medium relative text-amber-600 bg-amber-600/10 px-4 py-1.5 text-sm rounded-lg"
      >
        Warning
      </span>
      <span
        class="inline-flex items-center font-medium relative text-rose-600 bg-rose-600/10 px-4 py-1.5 text-sm rounded-lg"
      >
        Danger
      </span>
    </div>
  </div>
</section>