Badges Component
A responsive badges component with a 3D design, featuring depth and dark theme support. Each badge represents a user with a name, image, and description, designed using Tailwind CSS.
HTML Code
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 p-4">
<!-- Badge 1 -->
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-16 h-16 mb-2 shadow-md">
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h4>
<p class="text-gray-600 dark:text-gray-400">Web Developer</p>
</div>
<!-- Badge 2 -->
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="rounded-full w-16 h-16 mb-2 shadow-md">
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h4>
<p class="text-gray-600 dark:text-gray-400">Graphic Designer</p>
</div>
<!-- Badge 3 -->
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="rounded-full w-16 h-16 mb-2 shadow-md">
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Michael Johnson</h4>
<p class="text-gray-600 dark:text-gray-400">Product Manager</p>
</div>
<!-- Badge 4 -->
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="rounded-full w-16 h-16 mb-2 shadow-md">
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Sarah Connor</h4>
<p class="text-gray-600 dark:text-gray-400">UI/UX Designer</p>
</div>
<!-- Badge 5 -->
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="rounded-full w-16 h-16 mb-2 shadow-md">
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">David Lee</h4>
<p class="text-gray-600 dark:text-gray-400">Content Writer</p>
</div>
<!-- Badge 6 -->
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
<img src="https://randomuser.me/api/portraits/women/3.jpg" alt="Avatar" class="rounded-full w-16 h-16 mb-2 shadow-md">
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Emily Davis</h4>
<p class="text-gray-600 dark:text-gray-400">Software Engineer</p>
</div>
</div>Related Components
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.
Badges Component
A responsive badges component designed with a 3D style using Earth tones, featuring interactive elements suitable for a dashboard.
Financial Badges Component
A minimalist and flat design financial badges component using ocean/blue tones, suitable for finance and banking interfaces. It features responsive design and dark mode support.