Composant Badges
Un composant de badges de style Neumorphism pour les blogs avec une palette de couleurs analogue et une interface riche.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-800 flex items-center justify-center p-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Badge 1 -->
<div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6 flex items-center space-x-4 transition-all duration-300 hover:shadow-2xl cursor-pointer">
<img class="w-12 h-12 rounded-full shadow-inner" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<div class="flex flex-col">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Tech Trends</h2>
<p class="text-gray-600 dark:text-gray-400">Stay updated with the latest in technology.</p>
</div>
</div>
<!-- Badge 2 -->
<div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6 flex items-center space-x-4 transition-all duration-300 hover:shadow-2xl cursor-pointer">
<img class="w-12 h-12 rounded-full shadow-inner" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
<div class="flex flex-col">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Health & Wellness</h2>
<p class="text-gray-600 dark:text-gray-400">Tips for a healthier lifestyle.</p>
</div>
</div>
<!-- Badge 3 -->
<div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6 flex items-center space-x-4 transition-all duration-300 hover:shadow-2xl cursor-pointer">
<img class="w-12 h-12 rounded-full shadow-inner" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar">
<div class="flex flex-col">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Travel Diaries</h2>
<p class="text-gray-600 dark:text-gray-400">Explore the world through rich stories.</p>
</div>
</div>
<!-- Badge 4 -->
<div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6 flex items-center space-x-4 transition-all duration-300 hover:shadow-2xl cursor-pointer">
<img class="w-12 h-12 rounded-full shadow-inner" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
<div class="flex flex-col">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Food & Recipes</h2>
<p class="text-gray-600 dark:text-gray-400">Discover delicious recipes and cooking tips.</p>
</div>
</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 - Tableau de bord analogue 3D
Un composant de badges réactif avec une conception 3D, une palette de couleurs analogue, une complexité modérée et la prise en charge du thème sombre pour les tableaux de bord. Utilise uniquement les classes CSS Tailwind.
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.