Composant Badges
Un composant de badges réactif avec un style Skeuomorphism, une palette de couleurs triadique et une complexité simple, conçu pour les portfolios avec prise en charge du thème sombre.
HTML Code
<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>Composants associés
DégradéSépiaBadges
Un composant de badge spécifique à la musique/à l’audio réactif avec des transitions dégradées sépia/marron, adapté à l’affichage de genres, d’ambiances ou de catégories d’artistes. Inclut la prise en charge du mode sombre.
Composant Badges
Un composant Badges réactif conçu avec des micro-interactions, avec une palette de couleurs complémentaires et la prise en charge du thème sombre. Idéal pour les sites Web d’entreprise et d’entreprise, ce composant comprend des animations attrayantes qui répondent aux actions de l’utilisateur. Les repères visuels mentionnés précédemment, tels que les effets de survol, améliorent l’expérience utilisateur.
Composant Badges
Un composant de badges polyvalent conçu pour les sites Web d’entreprise, utilisant des tons de terre dans une interface utilisateur en mode sombre pour améliorer l’expérience utilisateur. Le composant présente une réactivité avec quelques éléments interactifs.