User Profiles Component
A User Profiles Component designed in a Brutalism style using Tailwind CSS, featuring a monochromatic color scheme and providing an interface for social networking. It supports dark mode and is responsive.
HTML Code
<div class="flex flex-col items-center justify-center bg-gray-900 p-6 rounded-lg shadow-lg dark:bg-gray-800">
<h1 class="text-4xl text-white font-bold mb-4">User Profiles</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 w-full">
<div class="bg-gray-700 p-4 rounded-lg shadow-lg dark:bg-gray-600">
<img src="https://picsum.photos/200/300?random=1" alt="User Image" class="w-full h-40 object-cover rounded-t-lg">
<div class="p-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-16 h-16 rounded-full mx-auto mb-2">
<h2 class="text-2xl text-white font-semibold text-center">John Doe</h2>
<p class="text-gray-400 text-center mb-2">@johndoe</p>
<p class="text-gray-300 text-center">Web Developer<br>Based in San Francisco</p>
<button class="mt-4 w-full bg-gray-800 text-white py-2 rounded hover:bg-gray-600 dark:bg-gray-700 dark:hover:bg-gray-500">Follow</button>
</div>
</div>
<div class="bg-gray-700 p-4 rounded-lg shadow-lg dark:bg-gray-600">
<img src="https://picsum.photos/200/300?random=2" alt="User Image" class="w-full h-40 object-cover rounded-t-lg">
<div class="p-4">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-16 h-16 rounded-full mx-auto mb-2">
<h2 class="text-2xl text-white font-semibold text-center">Jane Smith</h2>
<p class="text-gray-400 text-center mb-2">@janesmith</p>
<p class="text-gray-300 text-center">Graphic Designer<br>Based in New York</p>
<button class="mt-4 w-full bg-gray-800 text-white py-2 rounded hover:bg-gray-600 dark:bg-gray-700 dark:hover:bg-gray-500">Follow</button>
</div>
</div>
<div class="bg-gray-700 p-4 rounded-lg shadow-lg dark:bg-gray-600">
<img src="https://picsum.photos/200/300?random=3" alt="User Image" class="w-full h-40 object-cover rounded-t-lg">
<div class="p-4">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-16 h-16 rounded-full mx-auto mb-2">
<h2 class="text-2xl text-white font-semibold text-center">Alex Johnson</h2>
<p class="text-gray-400 text-center mb-2">@alexjohnson</p>
<p class="text-gray-300 text-center">Content Creator<br>Based in Austin</p>
<button class="mt-4 w-full bg-gray-800 text-white py-2 rounded hover:bg-gray-600 dark:bg-gray-700 dark:hover:bg-gray-500">Follow</button>
</div>
</div>
</div>
</div>Related Components
User Profiles Component
A complex, responsive user profiles component designed for food/restaurant websites, featuring a dark mode UI with high contrast colors. Includes multiple user cards with profile information and a call to action.
Glassmorphism User Profiles Component (Simple)
A simple, responsive user profile component with a glassmorphism design style, pastel color scheme, and dark mode support. Ideal for entertainment/media platforms.
User Profiles Component
A responsive user profile component with a 3D design aesthetic and earth-tone color scheme, suitable for travel and tourism websites. Includes dark mode support.