<div class="flex justify-center space-x-3 m-10">
    <div class="bg-red-200 text-red-800 px-3 py-2 uppercase text-xs rounded-full">Badge 1</div>
    <div class="bg-yellow-200 text-yellow-800 px-3 py-2 uppercase text-xs rounded-full">Badge 2</div>
    <div class="bg-green-200 text-green-800 px-3 py-2 uppercase text-xs rounded-full">Badge 3</div>
    <div class="bg-blue-200 text-blue-800 px-3 py-2 uppercase text-xs rounded-full">Badge 4</div>
    <div class="bg-indigo-200 text-indigo-800 px-3 py-2 uppercase text-xs rounded-full">Badge 5</div>
    <div class="bg-purple-200 text-purple-800 px-3 py-2 uppercase text-xs rounded-full">Badge 6</div>
    <div class="bg-pink-200 text-pink-800 px-3 py-2 uppercase text-xs rounded-full">Badge 7</div>
    <div class="bg-gray-200 text-gray-800 px-3 py-2 uppercase text-xs rounded-full">Badge 8</div>
</div>

<div class="flex justify-center space-x-3 m-10">
    <div class="bg-red-200 text-red-800 px-4 py-2 uppercase text-sm rounded-full">Badge 1</div>
    <div class="bg-yellow-200 text-yellow-800 px-4 py-2 uppercase text-sm rounded-full">Badge 2</div>
    <div class="bg-green-200 text-green-800 px-4 py-2 uppercase text-sm rounded-full">Badge 3</div>
    <div class="bg-blue-200 text-blue-800 px-4 py-2 uppercase text-sm rounded-full">Badge 4</div>
    <div class="bg-indigo-200 text-indigo-800 px-4 py-2 uppercase text-sm rounded-full">Badge 5</div>
    <div class="bg-purple-200 text-purple-800 px-4 py-2 uppercase text-sm rounded-full">Badge 6</div>
    <div class="bg-pink-200 text-pink-800 px-4 py-2 uppercase text-sm rounded-full">Badge 7</div>
    <div class="bg-gray-200 text-gray-800 px-4 py-2 uppercase text-sm rounded-full">Badge 8</div>
</div>

<div class="flex justify-center space-x-3 m-10">
        <div class="bg-red-900 text-red-200 px-4 py-2 uppercase text-sm rounded-full">Badge 1</div>
        <div class="bg-yellow-900 text-yellow-200 px-4 py-2 uppercase text-sm rounded-full">Badge 2</div>
        <div class="bg-green-900 text-green-200 px-4 py-2 uppercase text-sm rounded-full">Badge 3</div>
        <div class="bg-blue-900 text-blue-200 px-4 py-2 uppercase text-sm rounded-full">Badge 4</div>
        <div class="bg-indigo-900 text-indigo-200 px-4 py-2 uppercase text-sm rounded-full">Badge 5</div>
        <div class="bg-purple-900 text-purple-200 px-4 py-2 uppercase text-sm rounded-full">Badge 6</div>
        <div class="bg-pink-900 text-pink-200 px-4 py-2 uppercase text-sm rounded-full">Badge 7</div>
        <div class="bg-gray-900 text-gray-200 px-4 py-2 uppercase text-sm rounded-full">Badge 8</div>
    </div>

<div class="flex justify-center space-x-3 m-10">
    <div class="bg-green-200 text-green-800 px-3 py-2 uppercase text-xs rounded-full flex items-center space-x-2">
        <span class="w-2 h-2 rounded-full block bg-green-800"></span> <span>Online</span>
    </div>
    <div class="bg-gray-200 text-gray-800 px-3 py-2 uppercase text-xs rounded-full flex items-center space-x-2">
        <span class="w-2 h-2 rounded-full block bg-gray-800"></span> <span>Offline</span>
    </div>
</div>