Componente Badge
Un versatile componente Badge progettato per siti Web aziendali/aziendali, che utilizza i toni della Terra in un'interfaccia utente in modalità scura per migliorare l'esperienza dell'utente. Il componente è caratterizzato da reattività con alcuni elementi interattivi.
Codice HTML
<div class="flex flex-wrap justify-center p-6 bg-gray-900 text-gray-300">
<!-- Badge 1 -->
<div class="bg-green-800 dark:bg-green-600 text-white rounded-full px-4 py-2 mx-2 mb-4 transition-transform transform hover:scale-105">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="inline-block h-8 w-8 rounded-full mr-2">
<span>Project Leader</span>
</div>
<!-- Badge 2 -->
<div class="bg-brown-800 dark:bg-brown-600 text-white rounded-full px-4 py-2 mx-2 mb-4 transition-transform transform hover:scale-105">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="inline-block h-8 w-8 rounded-full mr-2">
<span>Senior Developer</span>
</div>
<!-- Badge 3 -->
<div class="bg-yellow-800 dark:bg-yellow-600 text-white rounded-full px-4 py-2 mx-2 mb-4 transition-transform transform hover:scale-105">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="inline-block h-8 w-8 rounded-full mr-2">
<span>UI/UX Designer</span>
</div>
<!-- Badge 4 -->
<div class="bg-gray-800 dark:bg-gray-600 text-white rounded-full px-4 py-2 mx-2 mb-4 transition-transform transform hover:scale-105">
<img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar" class="inline-block h-8 w-8 rounded-full mr-2">
<span>Content Strategist</span>
</div>
</div>Componenti correlati
GradienteSeppiaDistintivi
Un componente badge specifico per musica/audio reattivo con transizioni sfumate seppia/marrone, adatto per la visualizzazione di generi, stati d'animo o categorie di artisti. Include il supporto per la modalità scura.
Glassmorphism_Grayscale_Badges_Component
Un componente di badge in stile glassmorphism semplice e reattivo con una combinazione di colori in scala di grigi, adatto per siti Web aziendali/aziendali. Include il supporto per la modalità oscura.
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.