Componente Badge
Un semplice componente di badge in stile Glassmorphism per i social media, con effetti di vetro smerigliato con sfocatura, colori analoghi e supporto per la modalità scura utilizzando Tailwind CSS. È reattivo e utilizza picsum.photos per le immagini e randomuser.me per gli avatar dove necessario. Non è incluso alcun JavaScript.
Codice HTML
<div class="flex flex-wrap gap-2 p-4 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg dark:bg-gray-800 dark:bg-opacity-20">
<span class="px-3 py-1 rounded-full text-sm font-semibold bg-indigo-500 text-white bg-opacity-70 backdrop-filter backdrop-blur-sm dark:bg-indigo-700 dark:text-gray-200">
#SocialLife
</span>
<span class="px-3 py-1 rounded-full text-sm font-semibold bg-purple-500 text-white bg-opacity-70 backdrop-filter backdrop-blur-sm dark:bg-purple-700 dark:text-gray-200">
#Connections
</span>
<span class="px-3 py-1 rounded-full text-sm font-semibold bg-blue-500 text-white bg-opacity-70 backdrop-filter backdrop-blur-sm dark:bg-blue-700 dark:text-gray-200">
#Community
</span>
</div>Componenti correlati
Componente Badge
Un componente Badge reattivo con stile Skeuomorphism, combinazione di colori triadici e complessità semplice, progettato per portfolio con supporto per temi scuri.
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.
Componente Badge
Un componente minimalista per badge per cruscotti, con toni della terra e supporto per la modalità scura.