User Profiles Component
A responsive and minimalist user profiles component for social media, featuring multiple profiles with user information, follow buttons, and dark mode support. Uses an analogous color scheme.
HTML Code
<div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-indigo-50 to-purple-50 dark:from-slate-900 dark:to-gray-900 min-h-screen font-sans">
<div class="max-w-6xl mx-auto">
<h2 class="text-3xl sm:text-4xl font-extrabold text-gray-800 dark:text-gray-100 mb-8 text-center">
Featured Profiles
</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<!-- Profile Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 p-6 flex flex-col items-center text-center border border-gray-100 dark:border-gray-700">
<img class="w-24 h-24 rounded-full object-cover mb-4 ring-2 ring-indigo-300 dark:ring-purple-500" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Profile picture of Jane Doe">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">Jane Doe</h3>
<p class="text-sm text-gray-500 dark:text-gray-400 mb-4">@janedo_e</p>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">Passionate photographer exploring the world's hidden beauty through my lens. Sharing moments, one click at a time.</p>
<div class="flex justify-center gap-4 mb-4">
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">1.2K</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Followers</p>
</div>
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">350</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Following</p>
</div>
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">98</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Posts</p>
</div>
</div>
<button class="w-full py-2 px-4 rounded-lg bg-indigo-500 text-white font-medium hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 transition duration-300 dark:bg-purple-600 dark:hover:bg-purple-700">
Follow
</button>
</div>
<!-- Profile Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 p-6 flex flex-col items-center text-center border border-gray-100 dark:border-gray-700">
<img class="w-24 h-24 rounded-full object-cover mb-4 ring-2 ring-purple-300 dark:ring-indigo-500" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Profile picture of John Smith">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">John Smith</h3>
<p class="text-sm text-gray-500 dark:text-gray-400 mb-4">@johns_dev</p>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">Frontend developer building engaging user experiences. Passionate about clean code and modern web technologies.</p>
<div class="flex justify-center gap-4 mb-4">
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">870</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Followers</p>
</div>
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">210</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Following</p>
</div>
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">65</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Posts</p>
</div>
</div>
<button class="w-full py-2 px-4 rounded-lg bg-indigo-500 text-white font-medium hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 transition duration-300 dark:bg-purple-600 dark:hover:bg-purple-700">
Follow
</button>
</div>
<!-- Profile Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 p-6 flex flex-col items-center text-center border border-gray-100 dark:border-gray-700">
<img class="w-24 h-24 rounded-full object-cover mb-4 ring-2 ring-indigo-300 dark:ring-purple-500" src="https://randomuser.me/api/portraits/women/3.jpg" alt="Profile picture of Sarah Lee">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">Sarah Lee</h3>
<p class="text-sm text-gray-500 dark:text-gray-400 mb-4">@sarah_art</p>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">Digital artist and illustrator. Turning imagination into vivid colors and captivating visuals. Always learning, always creating.</p>
<div class="flex justify-center gap-4 mb-4">
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">1.5K</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Followers</p>
</div>
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">400</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Following</p>
</div>
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">120</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Posts</p>
</div>
</div>
<button class="w-full py-2 px-4 rounded-lg bg-indigo-500 text-white font-medium hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 transition duration-300 dark:bg-purple-600 dark:hover:bg-purple-700">
Follow
</button>
</div>
<!-- Profile Card 4 -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 p-6 flex flex-col items-center text-center border border-gray-100 dark:border-gray-700">
<img class="w-24 h-24 rounded-full object-cover mb-4 ring-2 ring-purple-300 dark:ring-indigo-500" src="https://randomuser.me/api/portraits/men/4.jpg" alt="Profile picture of Mike Ross">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">Mike Ross</h3>
<p class="text-sm text-gray-500 dark:text-gray-400 mb-4">@mikero_ss</p>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">Travel enthusiast documenting journeys across continents. Seeking adventure and sharing the beauty of different cultures.</p>
<div class="flex justify-center gap-4 mb-4">
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">950</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Followers</p>
</div>
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">280</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Following</p>
</div>
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">80</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Posts</p>
</div>
</div>
<button class="w-full py-2 px-4 rounded-lg bg-indigo-500 text-white font-medium hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 transition duration-300 dark:bg-purple-600 dark:hover:bg-purple-700">
Follow
</button>
</div>
<!-- Profile Card 5 -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 p-6 flex flex-col items-center text-center border border-gray-100 dark:border-gray-700">
<img class="w-24 h-24 rounded-full object-cover mb-4 ring-2 ring-indigo-300 dark:ring-purple-500" src="https://randomuser.me/api/portraits/women/5.jpg" alt="Profile picture of Emily White">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">Emily White</h3>
<p class="text-sm text-gray-500 dark:text-gray-400 mb-4">@emily_reads</p>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">Book lover and aspiring writer. Diving into new worlds, one page at a time. Sharing reviews and literary thoughts.</p>
<div class="flex justify-center gap-4 mb-4">
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">720</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Followers</p>
</div>
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">190</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Following</p>
</div>
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">55</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Posts</p>
</div>
</div>
<button class="w-full py-2 px-4 rounded-lg bg-indigo-500 text-white font-medium hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 transition duration-300 dark:bg-purple-600 dark:hover:bg-purple-700">
Follow
</button>
</div>
<!-- Profile Card 6 -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 p-6 flex flex-col items-center text-center border border-gray-100 dark:border-gray-700">
<img class="w-24 h-24 rounded-full object-cover mb-4 ring-2 ring-purple-300 dark:ring-indigo-500" src="https://randomuser.me/api/portraits/men/6.jpg" alt="Profile picture of David Green">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">David Green</h3>
<p class="text-sm text-gray-500 dark:text-gray-400 mb-4">@david_music</p>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">Musician and composer. Creating melodies that tell stories. Exploring sounds from classical to electronic.</p>
<div class="flex justify-center gap-4 mb-4">
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">1.1K</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Followers</p>
</div>
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">300</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Following</p>
</div>
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">110</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Posts</p>
</div>
</div>
<button class="w-full py-2 px-4 rounded-lg bg-indigo-500 text-white font-medium hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 transition duration-300 dark:bg-purple-600 dark:hover:bg-purple-700">
Follow
</button>
</div>
</div>
</div>
</div>Related Components
User Profiles Component
A responsive and professional user profiles component designed for cryptocurrency/blockchain applications, featuring a clean, trustworthy design with a complementary color scheme and dark mode support.
User Profiles Component
Responsive User Profiles Component with Microinteractions, Vibrant color scheme, and Simple complexity level for Portfolio.
User Profiles Component
A simple, responsive user profile component for e-commerce with microinteractions, complementing color scheme, dark mode support, and no JavaScript.