User Profiles Component
A responsive user profiles component for a dashboard, with a dark mode pastel theme, built with Tailwind CSS. It displays user avatars, names, roles, and a brief description, with a follow button. The design adapts to different screen sizes and supports dark mode based on the system preference.
HTML Code
<div class="min-h-screen bg-gray-900 p-4 dark:bg-gray-900">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- User Profile Card 1 -->
<div class="bg-gray-800 rounded-lg p-6 shadow-lg dark:bg-gray-800">
<div class="flex flex-col items-center">
<img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<h2 class="text-xl font-semibold text-purple-300 dark:text-purple-300">John Doe</h2>
<p class="text-blue-300 dark:text-blue-300">Software Engineer</p>
<p class="text-gray-400 text-center mt-2 dark:text-gray-400">Passionate about clean code and scalable architectures.</p>
<button class="mt-4 px-6 py-2 rounded-full bg-purple-600 text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 dark:bg-purple-600 dark:hover:bg-purple-700">Follow</button>
</div>
</div>
<!-- User Profile Card 2 -->
<div class="bg-gray-800 rounded-lg p-6 shadow-lg dark:bg-gray-800">
<div class="flex flex-col items-center">
<img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<h2 class="text-xl font-semibold text-green-300 dark:text-green-300">Jane Smith</h2>
<p class="text-teal-300 dark:text-teal-300">UI/UX Designer</p>
<p class="text-gray-400 text-center mt-2 dark:text-gray-400">Creating intuitive and beautiful user experiences.</p>
<button class="mt-4 px-6 py-2 rounded-full bg-green-600 text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 dark:bg-green-600 dark:hover:bg-green-700">Follow</button>
</div>
</div>
<!-- User Profile Card 3 -->
<div class="bg-gray-800 rounded-lg p-6 shadow-lg dark:bg-gray-800">
<div class="flex flex-col items-center">
<img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/men/78.jpg" alt="User Avatar">
<h2 class="text-xl font-semibold text-blue-300 dark:text-blue-300">Peter Jones</h2>
<p class="text-cyan-300 dark:text-cyan-300">Data Scientist</p>
<p class="text-gray-400 text-center mt-2 dark:text-gray-400">Uncovering insights from complex datasets.</p>
<button class="mt-4 px-6 py-2 rounded-full bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-600 dark:hover:bg-blue-700">Follow</button>
</div>
</div>
<!-- User Profile Card 4 -->
<div class="bg-gray-800 rounded-lg p-6 shadow-lg dark:bg-gray-800">
<div class="flex flex-col items-center">
<img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/women/65.jpg" alt="User Avatar">
<h2 class="text-xl font-semibold text-yellow-300 dark:text-yellow-300">Sarah Brown</h2>
<p class="text-orange-300 dark:text-orange-300">Product Manager</p>
<p class="text-gray-400 text-center mt-2 dark:text-gray-400">Bringing innovative products to life.</p>
<button class="mt-4 px-6 py-2 rounded-full bg-yellow-600 text-white hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-50 dark:bg-yellow-600 dark:hover:bg-yellow-700">Follow</button>
</div>
</div>
<!-- User Profile Card 5 -->
<div class="bg-gray-800 rounded-lg p-6 shadow-lg dark:bg-gray-800">
<div class="flex flex-col items-center">
<img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar">
<h2 class="text-xl font-semibold text-red-300 dark:text-red-300">Michael Green</h2>
<p class="text-pink-300 dark:text-pink-300">DevOps Engineer</p>
<p class="text-gray-400 text-center mt-2 dark:text-gray-400">Automating deployments and managing infrastructure.</p>
<button class="mt-4 px-6 py-2 rounded-full bg-red-600 text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 dark:bg-red-600 dark:hover:bg-red-700">Follow</button>
</div>
</div>
<!-- User Profile Card 6 -->
<div class="bg-gray-800 rounded-lg p-6 shadow-lg dark:bg-gray-800">
<div class="flex flex-col items-center">
<img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/women/21.jpg" alt="User Avatar">
<h2 class="text-xl font-semibold text-indigo-300 dark:text-indigo-300">Emily White</h2>
<p class="text-violet-300 dark:text-violet-300">Marketing Specialist</p>
<p class="text-gray-400 text-center mt-2 dark:text-gray-400">Crafting engaging campaigns and analyzing market trends.</p>
<button class="mt-4 px-6 py-2 rounded-full bg-indigo-600 text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 dark:bg-indigo-600 dark:hover:bg-indigo-700">Follow</button>
</div>
</div>
</div>
</div>Related Components
Neumorphism User Profiles Component with Vibrant colors
Neumorphism User Profiles Component with Vibrant colors for Business/Corporate websites, responsive design with dark theme support.
User Profiles Component
User Profiles Component with Brutalism design, Monochromatic color scheme, and Simple complexity for Social Media purpose.
User Profiles Component
A simple, responsive user profile component featuring microinteractions with a triadic color scheme, suitable for business or corporate websites.