{%- set _c = color|default('gray') -%}
{%- set _map = {'red':    'bg-red-100 text-red-800',
                'green':  'bg-green-100 text-green-800',
                'blue':   'bg-blue-100 text-blue-800',
                'yellow': 'bg-yellow-100 text-yellow-800',
                'purple': 'bg-purple-100 text-purple-800',
                'pink':   'bg-pink-100 text-pink-800',
                'gray':   'bg-gray-100 text-gray-800'} -%}
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ _map.get(_c, _map['gray']) }}">
    {{- text|default('') -}}
</span>