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
RetroBadges
Composant de badges rétro / vintage pour les sites Web d’entreprise / d’entreprise avec palette de couleurs complémentaire. Mise en page simple, conception réactive avec prise en charge du thème sombre. Pas de JavaScript.
Composant Badges
Un composant de badges réactifs avec le style Material Design, la prise en charge du thème sombre et la palette de couleurs Earth Tones pour le contenu du blog.
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.