Componente Badge
Un componente Badge reattivo con stile Skeuomorphism, combinazione di colori triadici e complessità semplice, progettato per portfolio con supporto per temi scuri.
Codice HTML
<div class="p-4 bg-gradient-to-br from-gray-300 via-gray-400 to-gray-500 dark:from-gray-700 dark:via-gray-800 dark:to-gray-900 rounded-xl shadow-xl max-w-sm mx-auto">
<div class="text-center">
<img class="w-24 h-24 rounded-full mx-auto border-4 border-white shadow-lg" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mt-4">John Doe</h2>
<p class="text-sm text-gray-600 dark:text-gray-400">Web Developer</p>
</div>
<div class="flex justify-center mt-6 space-x-3">
<span class="inline-block bg-teal-500 text-white text-xs px-3 py-1 rounded-full shadow-md">HTML</span>
<span class="inline-block bg-fuchsia-500 text-white text-xs px-3 py-1 rounded-full shadow-md">CSS</span>
<span class="inline-block bg-amber-500 text-white text-xs px-3 py-1 rounded-full shadow-md">Tailwind CSS</span>
</div>
<div class="mt-6 text-center text-gray-700 dark:text-gray-300 text-sm">
<p>Showcasing skills and expertise.</p>
</div>
</div>Componenti correlati
Healthcare_Badges_Component_Bauhaus
Un componente di badge a tema sanitario con un design ispirato al Bauhaus, con toni caldi e tramonto. Presenta forme geometriche e layout funzionale, adatto per la visualizzazione di stati o categorie in applicazioni mediche. Reattivo con supporto per la modalità oscura.
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.
Distintivi Skeuomorfi
Un set di badge con un design scheumorfico, una combinazione di colori complementari e un layout semplice, adatto per un blog o un sito di contenuti. Reattivo con supporto per la modalità oscura.