Composant Badges
Un composant de badges neumorphique conçu pour la consommation de contenu de blog avec des éléments interactifs et un design réactif prenant en charge le mode sombre.
HTML Code
<div class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-neumorphism">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Badges</h2>
<div class="grid grid-cols-3 gap-4">
<div class="flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded-full shadow-neumorphism w-24 h-24">
<img src="https://picsum.photos/100/100" alt="Badge 1" class="rounded-full">
<p class="text-center text-gray-800 dark:text-white mt-2">Badge 1</p>
</div>
<div class="flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded-full shadow-neumorphism w-24 h-24">
<img src="https://picsum.photos/100/101" alt="Badge 2" class="rounded-full">
<p class="text-center text-gray-800 dark:text-white mt-2">Badge 2</p>
</div>
<div class="flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded-full shadow-neumorphism w-24 h-24">
<img src="https://picsum.photos/100/102" alt="Badge 3" class="rounded-full">
<p class="text-center text-gray-800 dark:text-white mt-2">Badge 3</p>
</div>
</div>
<div class="grid grid-cols-1 gap-4 mt-8">
<div class="flex items-center justify-between p-4 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-neumorphism">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-12 h-12">
<div class="ml-4">
<h3 class="text-lg font-medium text-gray-800 dark:text-white">John Doe</h3>
<p class="text-sm text-gray-600 dark:text-gray-300">Contributor</p>
</div>
<button class="bg-blue-500 text-white rounded-md px-3 py-1 shadow-neumorphism hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Follow</button>
</div>
<div class="flex items-center justify-between p-4 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-neumorphism">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="rounded-full w-12 h-12">
<div class="ml-4">
<h3 class="text-lg font-medium text-gray-800 dark:text-white">Jane Smith</h3>
<p class="text-sm text-gray-600 dark:text-gray-300">Editor</p>
</div>
<button class="bg-blue-500 text-white rounded-md px-3 py-1 shadow-neumorphism hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Follow</button>
</div>
</div>
</div>Composants associés
Composant Badges - Mode sombre Tons de terre
Un système complexe de composants de badges conçu avec des tons de terre pour une interface de blog/contenu en mode sombre. Le composant comprend différents types de badges pour les catégories d’articles, le statut de l’utilisateur, les balises de contenu, les notifications et les indicateurs de réussite. Le tout en utilisant des couleurs naturelles de couleur terre avec prise en charge du mode sombre. Le design est entièrement réactif et s’adapte aux différentes tailles d’écran.
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.
Composant Badges
Un composant de badges réactifs conçu pour les interfaces de médias sociaux, avec des micro-interactions attrayantes et une palette de couleurs complémentaires, prenant en charge le mode sombre.