User Profiles Component
A responsive user profiles component featuring a glassmorphism design style, with support for dark themes and using Tailwind CSS.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 bg-opacity-20 backdrop-blur-md rounded-lg shadow-lg p-6 md:w-1/3 w-full">
<div class="flex flex-col items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-24 h-24 border-4 border-white dark:border-gray-700 mb-4 shadow-lg">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
<p class="text-gray-600 dark:text-gray-400">Web Developer</p>
<ul class="mt-4 space-y-2 text-center">
<li class="text-gray-700 dark:text-gray-300"><i class="fas fa-envelope"></i> [email protected]</li>
<li class="text-gray-700 dark:text-gray-300"><i class="fas fa-map-marker-alt"></i> New York, USA</li>
<li class="text-gray-700 dark:text-gray-300"><i class="fas fa-birthday-cake"></i> January 1, 1990</li>
</ul>
</div>
</div>
<div class="bg-white dark:bg-gray-800 bg-opacity-20 backdrop-blur-md rounded-lg shadow-lg p-6 md:w-1/3 w-full mt-6">
<div class="flex flex-col items-center">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="rounded-full w-24 h-24 border-4 border-white dark:border-gray-700 mb-4 shadow-lg">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h2>
<p class="text-gray-600 dark:text-gray-400">Graphic Designer</p>
<ul class="mt-4 space-y-2 text-center">
<li class="text-gray-700 dark:text-gray-300"><i class="fas fa-envelope"></i> [email protected]</li>
<li class="text-gray-700 dark:text-gray-300"><i class="fas fa-map-marker-alt"></i> London, UK</li>
<li class="text-gray-700 dark:text-gray-300"><i class="fas fa-birthday-cake"></i> March 5, 1992</li>
</ul>
</div>
</div>
</div>
<!-- Add Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">Related Components
User Profiles Component
Glassmorphism User Profile Component with Monochromatic color scheme and Simple complexity.
User Profiles Component
A simple, responsive user profile component for e-commerce with microinteractions, complementing color scheme, dark mode support, and no JavaScript.
User Profiles Component
A responsive User Profile component with Neumorphism design and dark mode support.