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
Un composant de badges réactifs avec prise en charge des micro-interactions et des thèmes sombres, conçu à l’aide de Tailwind CSS. Ce composant inclut des effets de survol et utilise des images d’espace réservé pour les avatars.
Composant Badges
Un composant de badges simple et réactif avec prise en charge du mode sombre, utilisant une palette de couleurs triadique adaptée à un portfolio.
Composant Badges
Un composant de badges réactif avec un design 3D, avec une prise en charge de la profondeur et du thème sombre. Chaque badge représente un utilisateur avec un nom, une image et une description, conçus à l’aide de Tailwind CSS.