Composant Badges
Un composant de badges neumorphes avec une palette de couleurs analogue pour un site Web de blog/contenu. Il dispose d’un design réactif et d’un support de thème sombre, en utilisant uniquement HTML et Tailwind CSS.
HTML Code
<div class="flex flex-wrap justify-center items-center h-screen bg-gray-200 dark:bg-gray-800 p-6">
<!-- Badge 1 -->
<div class="m-4">
<span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium
bg-gradient-to-br from-indigo-200 to-purple-300 dark:from-indigo-700 dark:to-purple-800
shadow-neumorphic-light dark:shadow-neumorphic-dark
text-gray-700 dark:text-gray-200
transition duration-300 ease-in-out transform hover:scale-105">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Category A
</span>
</div>
<!-- Badge 2 -->
<div class="m-4">
<span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium
bg-gradient-to-br from-blue-200 to-indigo-300 dark:from-blue-700 dark:to-indigo-800
shadow-neumorphic-light dark:shadow-neumorphic-dark
text-gray-700 dark:text-gray-200
transition duration-300 ease-in-out transform hover:scale-105">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
New Topic
</span>
</div>
<!-- Badge 3 -->
<div class="m-4">
<span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium
bg-gradient-to-br from-purple-200 to-pink-300 dark:from-purple-700 dark:to-pink-800
shadow-neumorphic-light dark:shadow-neumorphic-dark
text-gray-700 dark:text-gray-200
transition duration-300 ease-in-out transform hover:scale-105">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
Popular
</span>
</div>
<!-- Badge 4 -->
<div class="m-4">
<span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium
bg-gradient-to-br from-green-200 to-teal-300 dark:from-green-700 dark:to-teal-800
shadow-neumorphic-light dark:shadow-neumorphic-dark
text-gray-700 dark:text-gray-200
transition duration-300 ease-in-out transform hover:scale-105">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
Featured
</span>
</div>
<!-- Badge 5 (with avatar)-->
<div class="m-4">
<span class="inline-flex items-center px-3 py-2 rounded-full text-sm font-medium
bg-gradient-to-br from-red-200 to-orange-300 dark:from-red-700 dark:to-orange-800
shadow-neumorphic-light dark:shadow-neumorphic-dark
text-gray-700 dark:text-gray-200
transition duration-300 ease-in-out transform hover:scale-105">
<img class="h-6 w-6 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
Author Name
</span>
</div>
</div>
<!-- To make Neumorphic shadow work, you need to extend your tailwind.config.js -->
<style>
.shadow-neumorphic-light {
box-shadow: 6px 6px 12px #a8a8a8, -6px -6px 12px #ffffff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 6px 6px 12px #4a4a4a, -6px -6px 12px #323232;
}
</style>
Composants associés
Composant Badges
Un composant de badges réactifs conçu avec un style 3D utilisant des tons Terre, avec des éléments interactifs adaptés à un tableau de bord.
Composant Badges
Composant Badges - Design minimaliste / plat avec effets réactifs et prise en charge du thème sombre. Pas de JavaScript, du HTML pur et du CSS avec Tailwind.
Composant Badges neumorphes
Une collection de badges interactifs conçus dans un style neumorphique doux, adaptés aux applications technologiques/SaaS. Dispose de couleurs neutres froides, de la prise en charge du mode sombre et de la réactivité.