Composant Badges
Un composant Badges réactif conçu avec des micro-interactions, avec une palette de couleurs complémentaires et la prise en charge du thème sombre. Idéal pour les sites Web d’entreprise et d’entreprise, ce composant comprend des animations attrayantes qui répondent aux actions de l’utilisateur. Les repères visuels mentionnés précédemment, tels que les effets de survol, améliorent l’expérience utilisateur.
HTML Code
<div class="flex flex-wrap justify-center p-4 bg-white dark:bg-gray-800">
<div class="m-2 p-4 bg-blue-500 text-white rounded-lg shadow-lg hover:bg-blue-600 transition duration-300 ease-in-out transform hover:scale-105">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<span class="font-semibold">Marketing Team</span>
</div>
<p class="text-sm mt-2">Achieved a 20% increase in engagement through targeted campaigns.</p>
</div>
<div class="m-2 p-4 bg-green-500 text-white rounded-lg shadow-lg hover:bg-green-600 transition duration-300 ease-in-out transform hover:scale-105">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
<span class="font-semibold">Sales Team</span>
</div>
<p class="text-sm mt-2">Closed $500k in new contracts this quarter.</p>
</div>
<div class="m-2 p-4 bg-red-500 text-white rounded-lg shadow-lg hover:bg-red-600 transition duration-300 ease-in-out transform hover:scale-105">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar">
<span class="font-semibold">Product Team</span>
</div>
<p class="text-sm mt-2">Launched a new product that increased market share by 15%.</p>
</div>
<div class="m-2 p-4 bg-purple-500 text-white rounded-lg shadow-lg hover:bg-purple-600 transition duration-300 ease-in-out transform hover:scale-105">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar">
<span class="font-semibold">Development Team</span>
</div>
<p class="text-sm mt-2">Implemented new system improvements for better performance.</p>
</div>
</div>Composants associés
Composant Microinteractions Badges
Un composant de badges complexe et réactif aux couleurs pastel, conçu pour le conseil/les services, avec des micro-interactions au survol et la prise en charge du mode sombre. Chaque badge s’agrandit légèrement au survol pour révéler plus de contexte.
Memphis_Pastel_Food_Badges_Component
Un composant de badges complexe et réactif pour les sites Web de restauration, inspiré de Memphis Design avec une palette de couleurs pastel. Présente des formes géométriques, des motifs ludiques et inclut la prise en charge du mode sombre.
3D_Badge_Component
Un composant de badge simple et réactif inspiré de la 3D pour le blog/le contenu, avec des couleurs très contrastées et la prise en charge du mode sombre.