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

Минималистичный компонент значков для приборных панелей с поддержкой земляных тонов и темного режима.

Предварительный просмотр

HTML-код

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

Связанные компоненты

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

Компонент значков, разработанный в соответствии с принципами Material Design, с адаптивными макетами и поддержкой темных тем с использованием Tailwind CSS.

Открытый

Значки OrganicNatureInspiredBadges

Компонент значков средней сложности с плавными линиями, вдохновленными природой, и триадической цветовой гаммой, подходящий для портфолио для демонстрации работ или продуктов. Он включает в себя отзывчивость и поддержку темного режима.

Открытый

Glassmorphism_Grayscale_Badges_Component

Простой, отзывчивый компонент бейджей в стиле glassmorphism с цветовой схемой в оттенках серого, подходящий для бизнес/корпоративных сайтов. Включает поддержку темного режима.

Открытый