Componente Badge
Un componente di badge semplice e reattivo con supporto per la modalità scura, che utilizza una combinazione di colori triadica adatta a un portfolio.
Codice HTML
<div class="dark:bg-gray-900 min-h-screen p-8">
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
<h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">My Skills</h2>
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1 rounded-full text-sm font-semibold bg-blue-200 text-blue-800 dark:bg-blue-700 dark:text-blue-100">HTML</span>
<span class="px-3 py-1 rounded-full text-sm font-semibold bg-red-200 text-red-800 dark:bg-red-700 dark:text-red-100">CSS</span>
<span class="px-3 py-1 rounded-full text-sm font-semibold bg-green-200 text-green-800 dark:bg-green-700 dark:text-green-100">Tailwind CSS</span>
<span class="px-3 py-1 rounded-full text-sm font-semibold bg-yellow-200 text-yellow-800 dark:bg-yellow-700 dark:text-yellow-100">JavaScript</span>
<span class="px-3 py-1 rounded-full text-sm font-semibold bg-purple-200 text-purple-800 dark:bg-purple-700 dark:text-purple-100">React</span>
<span class="px-3 py-1 rounded-full text-sm font-semibold bg-pink-200 text-pink-800 dark:bg-pink-700 dark:text-pink-100">Python</span>
</div>
</div>
</div>Componenti correlati
3D_Badge_Component
Un componente badge semplice e reattivo ispirato al 3D per blog/contenuti, con colori ad alto contrasto e supporto per la modalità scura.
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.
Componente Badge
Componente Badge - Design minimalista/piatto con effetti reattivi e supporto per temi scuri. Niente JavaScript, HTML e CSS puri con Tailwind.