Pills

<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 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 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>