Composant Badges
Un composant simple de badges de style Glassmorphism pour les réseaux sociaux, avec des effets de verre dépoli avec du flou, des couleurs analogues et la prise en charge du mode sombre à l’aide de Tailwind CSS. Il est réactif et utilise picsum.photos pour les images et randomuser.me pour les avatars si nécessaire. Aucun JavaScript n’est inclus.
HTML Code
<div class="flex flex-wrap gap-2 p-4 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg dark:bg-gray-800 dark:bg-opacity-20">
<span class="px-3 py-1 rounded-full text-sm font-semibold bg-indigo-500 text-white bg-opacity-70 backdrop-filter backdrop-blur-sm dark:bg-indigo-700 dark:text-gray-200">
#SocialLife
</span>
<span class="px-3 py-1 rounded-full text-sm font-semibold bg-purple-500 text-white bg-opacity-70 backdrop-filter backdrop-blur-sm dark:bg-purple-700 dark:text-gray-200">
#Connections
</span>
<span class="px-3 py-1 rounded-full text-sm font-semibold bg-blue-500 text-white bg-opacity-70 backdrop-filter backdrop-blur-sm dark:bg-blue-700 dark:text-gray-200">
#Community
</span>
</div>Composants associés
Healthcare_Badges_Component_Bauhaus
Un composant de badges sur le thème de la santé avec un design inspiré du Bauhaus, utilisant des tons coucher de soleil/chauds. Il présente des formes géométriques et une disposition fonctionnelle, adaptées à l’affichage de l’état ou des catégories dans les applications médicales. Réactif avec prise en charge du mode sombre.
Industrial_Candy_Finance_Badges_Component
Un composant complexe de badges pour la finance/banque, mélangeant l’esthétique industrielle avec des couleurs vives de bonbon. Dispose de plusieurs badges interactifs, d’un design réactif et d’une prise en charge du mode sombre.
Composant Badges
Un composant de badges épuré et minimaliste conçu pour les systèmes de réservation, avec une mise en page réactive, une palette de couleurs pastel et une prise en charge du mode sombre, inspiré de la typographie suisse et internationale.