Componente Badge
Un componente badge reattivo con un design 3D, con supporto per profondità e tema scuro. Ogni badge rappresenta un utente con un nome, un'immagine e una descrizione, progettati utilizzando Tailwind CSS.
Codice HTML
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 p-4">
<!-- Badge 1 -->
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-16 h-16 mb-2 shadow-md">
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h4>
<p class="text-gray-600 dark:text-gray-400">Web Developer</p>
</div>
<!-- Badge 2 -->
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="rounded-full w-16 h-16 mb-2 shadow-md">
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h4>
<p class="text-gray-600 dark:text-gray-400">Graphic Designer</p>
</div>
<!-- Badge 3 -->
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="rounded-full w-16 h-16 mb-2 shadow-md">
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Michael Johnson</h4>
<p class="text-gray-600 dark:text-gray-400">Product Manager</p>
</div>
<!-- Badge 4 -->
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="rounded-full w-16 h-16 mb-2 shadow-md">
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Sarah Connor</h4>
<p class="text-gray-600 dark:text-gray-400">UI/UX Designer</p>
</div>
<!-- Badge 5 -->
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="rounded-full w-16 h-16 mb-2 shadow-md">
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">David Lee</h4>
<p class="text-gray-600 dark:text-gray-400">Content Writer</p>
</div>
<!-- Badge 6 -->
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
<img src="https://randomuser.me/api/portraits/women/3.jpg" alt="Avatar" class="rounded-full w-16 h-16 mb-2 shadow-md">
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Emily Davis</h4>
<p class="text-gray-600 dark:text-gray-400">Software Engineer</p>
</div>
</div>Componenti correlati
Componente Badge
Un componente di badge in stile neumorfismo per blog con combinazione di colori analoga e interfaccia ricca.
Distintivi Skeuomorfi
Un componente Skeuomorphic Badges con effetti reattivi e supporto per temi scuri.
Componente Badge
Un componente di badge reattivo con microinterazioni e supporto per temi scuri, progettato utilizzando Tailwind CSS. Questo componente include effetti al passaggio del mouse e utilizza immagini segnaposto per gli avatar.