Componenti Distintivi Distintivi Componente 48

Distintivi Componente 48

Un componente Badge progettato con i principi del Material Design, con layout reattivi e supporto per temi scuri utilizzando Tailwind CSS.

Anteprima

Codice HTML

<div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-xl font-semibold mb-4 dark:text-white">Badges</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
        <div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-lg shadow transition duration-300 hover:shadow-lg">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <span class="text-gray-800 dark:text-gray-200 font-medium">Badge 1</span>
        </div>
        <div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-lg shadow transition duration-300 hover:shadow-lg">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <span class="text-gray-800 dark:text-gray-200 font-medium">Badge 2</span>
        </div>
        <div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-lg shadow transition duration-300 hover:shadow-lg">
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <span class="text-gray-800 dark:text-gray-200 font-medium">Badge 3</span>
        </div>
        <div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-lg shadow transition duration-300 hover:shadow-lg">
            <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <span class="text-gray-800 dark:text-gray-200 font-medium">Badge 4</span>
        </div>
        <div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-lg shadow transition duration-300 hover:shadow-lg">
            <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <span class="text-gray-800 dark:text-gray-200 font-medium">Badge 5</span>
        </div>
        <div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-lg shadow transition duration-300 hover:shadow-lg">
            <img src="https://randomuser.me/api/portraits/women/6.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <span class="text-gray-800 dark:text-gray-200 font-medium">Badge 6</span>
        </div>
    </div>
</div>

Componenti correlati

Componente Badge

Componente Badge - Design minimalista/piatto con effetti reattivi e supporto per temi scuri. Niente JavaScript, HTML e CSS puri con Tailwind.

Aperto

Componente Badge

Un componente di badge in modalità scura reattivo per l'e-commerce, che mostra vari badge con combinazioni di colori complementari ed elementi interattivi.

Aperto

Componente Badge

Un componente Badge neumorfico progettato per il consumo di contenuti di blog con elementi interattivi e un design reattivo che supporta la modalità scura.

Aperto