Badges Component 48
A Badges Component designed with Material Design principles, featuring responsive layouts and dark theme support using Tailwind CSS.
HTML Code
<div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
<h2 class="text-xl font-semibold mb-4 dark:text-white">Badges</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
<div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-lg shadow transition duration-300 hover:shadow-lg">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<span class="text-gray-800 dark:text-gray-200 font-medium">Badge 1</span>
</div>
<div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-lg shadow transition duration-300 hover:shadow-lg">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<span class="text-gray-800 dark:text-gray-200 font-medium">Badge 2</span>
</div>
<div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-lg shadow transition duration-300 hover:shadow-lg">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<span class="text-gray-800 dark:text-gray-200 font-medium">Badge 3</span>
</div>
<div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-lg shadow transition duration-300 hover:shadow-lg">
<img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<span class="text-gray-800 dark:text-gray-200 font-medium">Badge 4</span>
</div>
<div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-lg shadow transition duration-300 hover:shadow-lg">
<img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<span class="text-gray-800 dark:text-gray-200 font-medium">Badge 5</span>
</div>
<div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-lg shadow transition duration-300 hover:shadow-lg">
<img src="https://randomuser.me/api/portraits/women/6.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<span class="text-gray-800 dark:text-gray-200 font-medium">Badge 6</span>
</div>
</div>
</div>Related Components
Badges Component - 3D Analogous Dashboard
A responsive Badges Component with 3D design, analogous color scheme, moderate complexity, and dark theme support for dashboards. Uses Tailwind CSS classes only.
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 responsive badges component designed for social media interfaces, featuring engaging microinteractions and a complementary color scheme, supporting dark mode.