<div class="flex flex-wrap justify-center gap-4 lg:gap-6">
  <span class="py-1 px-2 font-medium rounded-md bg-neutral-900 text-neutral-0 text-xs">Default</span>
  <span class="py-1 px-2 font-medium rounded-md bg-primary-300 text-neutral-0 text-xs">Primary</span>
  <span class="py-1 px-2 font-medium rounded-md bg-secondary-300 text-neutral-0 text-xs">Secondary</span>
  <span class="py-1 px-2 font-medium rounded-md bg-success-300 text-neutral-0 text-xs">Success</span>
  <span class="py-1 px-2 font-medium rounded-md bg-info-300 text-neutral-0 text-xs">Info</span>
  <span class="py-1 px-2 font-medium rounded-md bg-warning-300 text-neutral-0 text-xs">Warning</span>
  <span class="py-1 px-2 font-medium rounded-md bg-error-300 text-neutral-0 text-xs">Error</span>
</div>
                  

<div class="flex flex-wrap justify-center gap-4 lg:gap-6">
  <span class="py-1 px-2 font-medium rounded-md text-neutral-900 dark:text-neutral-20 border-neutral-900 bg-transparent dark:bg-neutral-700 border text-xs">Default</span>
  <span class="py-1 px-2 font-medium rounded-md text-primary-300 border-primary-300 bg-transparent border text-xs">Primary</span>
  <span class="py-1 px-2 font-medium rounded-md text-secondary-300 border-secondary-300 bg-transparent border text-xs">Success</span>
  <span class="py-1 px-2 font-medium rounded-md text-success-300 border-success-300 bg-transparent border text-xs">Secondary</span>
  <span class="py-1 px-2 font-medium rounded-md text-info-300 border-info-300 bg-transparent border text-xs">Info</span>
  <span class="py-1 px-2 font-medium rounded-md text-warning-300 border-warning-300 bg-transparent border text-xs">Warning</span>
  <span class="py-1 px-2 font-medium rounded-md text-error-300 border-error-300 bg-transparent border text-xs">Error</span>
</div>
                  

<div class="flex flex-wrap justify-center gap-4 lg:gap-6">
  <span class="py-1 px-2 font-medium rounded-md bg-neutral-50 text-neutral-700 text-xs">Default</span>
  <span class="py-1 px-2 font-medium rounded-md bg-primary-300/10 text-primary-500 text-xs">Primary</span>
  <span class="py-1 px-2 font-medium rounded-md bg-secondary-300/10 text-secondary-300 text-xs">Secondary</span>
  <span class="py-1 px-2 font-medium rounded-md bg-success-300/10 text-success-500 text-xs">Success</span>
  <span class="py-1 px-2 font-medium rounded-md bg-info-300/10 text-info-500 text-xs">Info</span>
  <span class="py-1 px-2 font-medium rounded-md bg-warning-300/10 text-warning-500 text-xs">Warning</span>
  <span class="py-1 px-2 font-medium rounded-md bg-error-300/10 text-error-500 text-xs">Error</span>
</div>
                  

<div class="flex flex-wrap justify-center gap-4 lg:gap-6">
  <span class="py-1 px-2 font-medium rounded-md bg-primary-300 text-neutral-0 flex items-center gap-2">
    <i class="las la-layer-group text-lg size-5 f-center"></i>
    <span class="text-xs">Primary</span>
  </span>
  <span class="py-1 px-2 font-medium rounded-md bg-primary-300 text-neutral-0 flex items-center gap-2">
    <span class="text-xs">Primary</span>
    <i class="las la-layer-group text-lg size-5 f-center"></i>
  </span>
  <span class="py-1 px-2 font-medium rounded-md text-primary-300 bg-transparent border border-primary-300 flex items-center gap-2">
    <i class="las la-layer-group text-lg size-5 f-center"></i>
    <span class="text-xs">Primary</span>
  </span>
  <span class="py-1 px-2 font-medium rounded-md text-primary-300 bg-transparent border border-primary-300 flex items-center gap-2">
    <span class="text-xs">Primary</span>
    <i class="las la-layer-group text-lg size-5 f-center"></i>
  </span>
  <span class="py-1 px-2 font-medium rounded-md bg-primary-50 text-primary-300 flex items-center gap-2">
    <i class="las la-layer-group text-lg size-5 f-center"></i>
    <span class="text-xs">Primary</span>
  </span>
  <span class="py-1 px-2 font-medium rounded-md bg-primary-50 text-primary-300 flex items-center gap-2">
    <span class="text-xs">Primary</span>
    <i class="las la-layer-group text-lg size-5 f-center"></i>
  </span>
</div>