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 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
Un composant Badges réactif avec des micro-interactions attrayantes, conçu à l’aide de Tailwind CSS. Prend en charge le mode sombre et inclut des espaces réservés aux images.
Insignes Skeuomorphes
Un composant Skeuomorphic Badges avec des effets réactifs et la prise en charge du thème sombre.