Componente Badge
Un componente Badge reattivo progettato con lo stile Glassmorphism, con elementi traslucidi simili al vetro smerigliato ed effetti di sfocatura, con supporto per la modalità oscura.
Codice HTML
<div class="flex flex-wrap justify-center space-x-4 mt-10">
<!-- Badge 1 -->
<div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-md rounded-lg border border-gray-200 dark:bg-gray-800 dark:bg-opacity-50 p-4 shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out">
<img src="https://picsum.photos/50/50" alt="Avatar" class="rounded-full mb-2">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">John Doe</h3>
<p class="text-gray-500 dark:text-gray-400">Web Developer</p>
</div>
<!-- Badge 2 -->
<div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-md rounded-lg border border-gray-200 dark:bg-gray-800 dark:bg-opacity-50 p-4 shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out">
<img src="https://picsum.photos/50/51" alt="Avatar" class="rounded-full mb-2">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Jane Smith</h3>
<p class="text-gray-500 dark:text-gray-400">Graphic Designer</p>
</div>
<!-- Badge 3 -->
<div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-md rounded-lg border border-gray-200 dark:bg-gray-800 dark:bg-opacity-50 p-4 shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out">
<img src="https://picsum.photos/50/52" alt="Avatar" class="rounded-full mb-2">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Mike Lee</h3>
<p class="text-gray-500 dark:text-gray-400">UX Designer</p>
</div>
<!-- Badge 4 -->
<div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-md rounded-lg border border-gray-200 dark:bg-gray-800 dark:bg-opacity-50 p-4 shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out">
<img src="https://picsum.photos/50/53" alt="Avatar" class="rounded-full mb-2">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Emily Clark</h3>
<p class="text-gray-500 dark:text-gray-400">Product Manager</p>
</div>
</div>Componenti correlati
Componente Badge
Un componente di badge neumorfici con una combinazione di colori analoga per un sito Web di blog/contenuti. Presenta un design reattivo e il supporto per i temi scuri, utilizzando solo HTML e Tailwind CSS.
Componente Badge
Un componente di badge reattivo progettato per le interfacce dei social media, caratterizzato da microinterazioni coinvolgenti e una combinazione di colori complementari, che supporta la modalità scura.
Componente Badge
Un componente di badge reattivo progettato con uno stile 3D utilizzando i toni della Terra, con elementi interattivi adatti a una dashboard.