Компонент «Бейджи»

<div class="flex flex-wrap p-4 bg-gray-100 dark:bg-gray-800 rounded-lg">
    <div class="flex items-center m-2">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-brown-600" />
        <span class="ml-2 text-brown-600 dark:text-brown-400 font-semibold">Design Team</span>
        <span class="ml-2 px-2 py-1 text-sm text-white bg-brown-600 rounded-full">3</span>
    </div>
    <div class="flex items-center m-2">
        <img src="https://picsum.photos/id/1018/100/100" alt="Project Image" class="w-10 h-10 rounded-full border-2 border-brown-600" />
        <span class="ml-2 text-brown-600 dark:text-brown-400 font-semibold">Project A</span>
        <span class="ml-2 px-2 py-1 text-sm text-white bg-brown-600 rounded-full">5</span>
    </div>
    <div class="flex items-center m-2">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-green-600" />
        <span class="ml-2 text-green-600 dark:text-green-400 font-semibold">Marketing</span>
        <span class="ml-2 px-2 py-1 text-sm text-white bg-green-600 rounded-full">8</span>
    </div>
    <div class="flex items-center m-2">
        <img src="https://picsum.photos/id/1031/100/100" alt="Project Image" class="w-10 h-10 rounded-full border-2 border-red-600" />
        <span class="ml-2 text-red-600 dark:text-red-400 font-semibold">Project B</span>
        <span class="ml-2 px-2 py-1 text-sm text-white bg-red-600 rounded-full">2</span>
    </div>
</div>