Badge pastello Interfaccia utente in modalità scura
Un componente di badge semplice e reattivo per i siti web aziendali, dotato di un'interfaccia utente in modalità scura con colori pastello. Progettato con Tailwind CSS, utilizza uno sfondo scuro per ridurre l'affaticamento degli occhi e supporta un layout reattivo.
Codice HTML
<div class="flex flex-wrap gap-2 p-4 bg-gray-100 dark:bg-gray-900">
<span class="px-3 py-1 text-sm font-medium text-purple-800 bg-purple-200 rounded-full dark:bg-purple-700 dark:text-purple-100">
Business
</span>
<span class="px-3 py-1 text-sm font-medium text-green-800 bg-green-200 rounded-full dark:bg-green-700 dark:text-green-100">
Corporate
</span>
<span class="px-3 py-1 text-sm font-medium text-blue-800 bg-blue-200 rounded-full dark:bg-blue-700 dark:text-blue-100">
Innovation
</span>
<span class="px-3 py-1 text-sm font-medium text-pink-800 bg-pink-200 rounded-full dark:bg-pink-700 dark:text-pink-100">
Strategy
</span>
<span class="px-3 py-1 text-sm font-medium text-yellow-800 bg-yellow-200 rounded-full dark:bg-yellow-700 dark:text-yellow-100">
Growth
</span>
</div>Componenti correlati
Componente Badge - Cruscotto analogo 3D
Un componente badge reattivo con design 3D, combinazione di colori analoga, complessità moderata e supporto per temi scuri per le dashboard. Utilizza solo le classi CSS di Tailwind.
Componente Badge per prodotti e-commerce
Un complesso componente di badge per prodotti di e-commerce caratterizzato da un uso intensivo di sfumature di colore da una tavolozza foresta/verde, transizioni fluide e un design reattivo con supporto della modalità scura. Adatto per mostrare lo stato dei prodotti, le offerte o le categorie.
Componente Badge Neumorfici
Una collezione di badge interattivi progettati in uno stile neumorfico morbido, adatti per applicazioni tecnologiche/SaaS. Presenta colori neutri freddi, supporto per la modalità oscura e reattività.