<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="rounded-full inline-flex items-center font-medium relative text-white bg-base-900 px-2.5 py-1 text-xs"
>
Default
</span>
<span
class="rounded-full inline-flex items-center font-medium relative text-white bg-accent-600 px-2.5 py-1 text-xs"
>
Accent
</span>
<span
class="rounded-full inline-flex items-center font-medium relative text-base-500 bg-white ring-1 ring-base-200 px-2.5 py-1 text-xs"
>
Alternative
</span>
<span
class="rounded-full inline-flex items-center font-medium relative text-base-700 bg-base-50 px-2.5 py-1 text-xs"
>
Muted
</span>
<span
class="rounded-full inline-flex items-center font-medium relative text-base-500 bg-white px-2.5 py-1 text-xs"
>
Text
</span>
<span
class="rounded-full inline-flex items-center font-medium relative text-accent-700 bg-accent-600/10 px-2.5 py-1 text-xs"
>
Info
</span>
<span
class="rounded-full inline-flex items-center font-medium relative text-emerald-600 bg-emerald-600/10 px-2.5 py-1 text-xs"
>
Success
</span>
<span
class="rounded-full inline-flex items-center font-medium relative text-amber-600 bg-amber-600/10 px-2.5 py-1 text-xs"
>
Warning
</span>
<span
class="rounded-full inline-flex items-center font-medium relative text-rose-600 bg-rose-600/10 px-2.5 py-1 text-xs"
>
Danger
</span>
</div>
<!-- SM Size -->
<div class="flex flex-wrap gap-2 justify-center">
<span
class="rounded-full inline-flex items-center font-medium relative text-white bg-base-900 px-4 py-1.5 text-sm"
>
Default
</span>
<span
class="rounded-full inline-flex items-center font-medium relative text-white bg-accent-600 px-4 py-1.5 text-sm"
>
Accent
</span>
<span
class="rounded-full inline-flex items-center font-medium relative text-base-500 bg-white ring-1 ring-base-200 px-4 py-1.5 text-sm"
>
Alternative
</span>
<span
class="rounded-full inline-flex items-center font-medium relative text-base-700 bg-base-50 px-4 py-1.5 text-sm"
>
Muted
</span>
<span
class="rounded-full inline-flex items-center font-medium relative text-base-500 bg-white px-4 py-1.5 text-sm"
>
Text
</span>
<span
class="rounded-full inline-flex items-center font-medium relative text-accent-700 bg-accent-600/10 px-4 py-1.5 text-sm"
>
Info
</span>
<span
class="rounded-full inline-flex items-center font-medium relative text-emerald-600 bg-emerald-600/10 px-4 py-1.5 text-sm"
>
Success
</span>
<span
class="rounded-full inline-flex items-center font-medium relative text-amber-600 bg-amber-600/10 px-4 py-1.5 text-sm"
>
Warning
</span>
<span
class="rounded-full inline-flex items-center font-medium relative text-rose-600 bg-rose-600/10 px-4 py-1.5 text-sm"
>
Danger
</span>
</div>
</div>
</section>