Badges Component
A responsive Badges component designed with microinteractions, featuring a complementary color scheme and dark theme support. Ideal for business and corporate websites, this component includes engaging animations that respond to user actions. Previously mentioned visual cues like hover effects enhance the user experience.
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>Related Components
Badges Component
A retro-themed badges component with a grayscale color scheme, suitable for a blog or content site. It features multiple interactive elements and full responsiveness, with dark mode support. The design avoids JavaScript, relying solely on HTML and Tailwind CSS.
Badges Component
A simple and responsive Badges Component designed with a 3D aesthetic and complementary color scheme for blog and content consumption. Supports dark mode.
Skeuomorphic Badges
A set of badges with a skeuomorphic design, complementary color scheme, and simple layout, suitable for a blog or content site. Responsive with dark mode support.