<div class="rounded-full py-1 px-4 bg-gray-400 text-xs inline-block text-gray-700 font-bold leading-normal uppercase mr-2">Default</div>
<div class="rounded-full py-1 px-4 bg-primary-500 text-xs inline-block text-white font-bold leading-normal uppercase mr-2">Primary</div>
<div class="rounded-full py-1 px-4 bg-secondary-500 text-xs inline-block text-white font-bold leading-normal uppercase mr-2">Secondary</div>
<div class="rounded-full py-1 px-4 bg-tertiary-500 text-xs inline-block text-white font-bold leading-normal uppercase mr-2">Tertiary</div>
<div class="rounded-full py-1 px-4 bg-orange-400 text-xs inline-block text-white font-bold leading-normal uppercase mr-2">Accent</div><div class="rounded-full py-1 px-4 bg-transparent border-2 border-gray-400 text-xs inline-block text-gray-700 dark:text-gray-200 font-bold leading-normal uppercase mr-2">Default</div>
<div class="rounded-full py-1 px-4 bg-transparent border-2 border-primary-500 text-xs inline-block text-primary-500 font-bold leading-normal uppercase mr-2">Primary</div>
<div class="rounded-full py-1 px-4 bg-transparent border-2 border-secondary-500 text-xs inline-block text-secondary-500 font-bold leading-normal uppercase mr-2">Secondary</div>
<div class="rounded-full py-1 px-4 bg-transparent border-2 border-tertiary-500 text-xs inline-block text-tertiary-500 dark:text-gray-300 font-bold leading-normal uppercase mr-2">Tertiary</div>
<div class="rounded-full py-1 px-4 bg-transparent border-2 border-orange-500 text-xs inline-block text-orange-500 font-bold leading-normal uppercase mr-2">Accent</div>