User Profiles Component
A responsive user profiles component for non-profit/charity organizations, featuring a luxury/premium design with professional blue tones, dark mode support, and sophisticated typography.
HTML Code
<section class="py-12 bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 transition-colors duration-300">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="text-4xl font-extrabold tracking-tight text-blue-800 dark:text-blue-400 sm:text-5xl">
Meet Our Dedicated Team
</h2>
<p class="mt-4 text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
Our passionate individuals are committed to making a difference. Learn more about the people behind our mission.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Profile Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border-t-4 border-blue-600 dark:border-blue-500">
<div class="p-6">
<div class="flex flex-col items-center">
<img class="h-32 w-32 rounded-full object-cover mb-4 ring-4 ring-blue-200 dark:ring-blue-700" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Alice Johnson">
<h3 class="text-2xl font-semibold text-blue-700 dark:text-blue-300">Alice Johnson</h3>
<p class="text-md text-gray-500 dark:text-gray-400 font-medium mb-3">Executive Director</p>
<p class="text-center text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
Alice leads our organization with a vision for positive change, driving initiatives and partnerships.
</p>
</div>
<div class="mt-6 flex justify-center space-x-4">
<a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200" aria-label="LinkedIn">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.535-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200" aria-label="Email">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M.05 3.197L12 10.999 23.95 3.197zM0 4.609v14.075c0 1.284 1.041 2.325 2.325 2.325h19.35c1.284 0 2.325-1.041 2.325-2.325V4.609L12 12.607 0 4.609z"/>
</svg>
</a>
</div>
</div>
</div>
<!-- Profile Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border-t-4 border-blue-600 dark:border-blue-500">
<div class="p-6">
<div class="flex flex-col items-center">
<img class="h-32 w-32 rounded-full object-cover mb-4 ring-4 ring-blue-200 dark:ring-blue-700" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Mark Stevens">
<h3 class="text-2xl font-semibold text-blue-700 dark:text-blue-300">Mark Stevens</h3>
<p class="text-md text-gray-500 dark:text-gray-400 font-medium mb-3">Head of Programs</p>
<p class="text-center text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
Mark designs and implements our core programs, ensuring maximum impact on the communities we serve.
</p>
</div>
<div class="mt-6 flex justify-center space-x-4">
<a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200" aria-label="LinkedIn">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.535-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200" aria-label="Email">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M.05 3.197L12 10.999 23.95 3.197zM0 4.609v14.075c0 1.284 1.041 2.325 2.325 2.325h19.35c1.284 0 2.325-1.041 2.325-2.325V4.609L12 12.607 0 4.609z"/>
</svg>
</a>
</div>
</div>
</div>
<!-- Profile Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border-t-4 border-blue-600 dark:border-blue-500">
<div class="p-6">
<div class="flex flex-col items-center">
<img class="h-32 w-32 rounded-full object-cover mb-4 ring-4 ring-blue-200 dark:ring-blue-700" src="https://randomuser.me/api/portraits/women/78.jpg" alt="Sarah Kim">
<h3 class="text-2xl font-semibold text-blue-700 dark:text-blue-300">Sarah Kim</h3>
<p class="text-md text-gray-500 dark:text-gray-400 font-medium mb-3">Community Outreach Manager</p>
<p class="text-center text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
Sarah connects us with communities, building relationships and understanding local needs for effective support.
</p>
</div>
<div class="mt-6 flex justify-center space-x-4">
<a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200" aria-label="LinkedIn">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.535-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200" aria-label="Email">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M.05 3.197L12 10.999 23.95 3.197zM0 4.609v14.075c0 1.284 1.041 2.325 2.325 2.325h19.35c1.284 0 2.325-1.041 2.325-2.325V4.609L12 12.607 0 4.609z"/>
</svg>
</a>
</div>
</div>
</div>
<!-- Profile Card 4 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border-t-4 border-blue-600 dark:border-blue-500">
<div class="p-6">
<div class="flex flex-col items-center">
<img class="h-32 w-32 rounded-full object-cover mb-4 ring-4 ring-blue-200 dark:ring-blue-700" src="https://randomuser.me/api/portraits/men/50.jpg" alt="David Lee">
<h3 class="text-2xl font-semibold text-blue-700 dark:text-blue-300">David Lee</h3>
<p class="text-md text-gray-500 dark:text-gray-400 font-medium mb-3">Volunteer Coordinator</p>
<p class="text-center text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
David manages our amazing volunteers, ensuring they are well-supported and effectively deployed.
</p>
</div>
<div class="mt-6 flex justify-center space-x-4">
<a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200" aria-label="LinkedIn">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.535-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200" aria-label="Email">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M.05 3.197L12 10.999 23.95 3.197zM0 4.609v14.075c0 1.284 1.041 2.325 2.325 2.325h19.35c1.284 0 2.325-1.041 2.325-2.325V4.609L12 12.607 0 4.609z"/>
</svg>
</a>
</div>
</div>
</div>
<!-- Profile Card 5 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border-t-4 border-blue-600 dark:border-blue-500">
<div class="p-6">
<div class="flex flex-col items-center">
<img class="h-32 w-32 rounded-full object-cover mb-4 ring-4 ring-blue-200 dark:ring-blue-700" src="https://randomuser.me/api/portraits/women/62.jpg" alt="Emily White">
<h3 class="text-2xl font-semibold text-blue-700 dark:text-blue-300">Emily White</h3>
<p class="text-md text-gray-500 dark:text-gray-400 font-medium mb-3">Events & Fundraising Manager</p>
<p class="text-center text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
Emily orchestrates our fundraising events, engaging donors and raising vital funds for our causes.
</p>
</div>
<div class="mt-6 flex justify-center space-x-4">
<a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200" aria-label="LinkedIn">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.535-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200" aria-label="Email">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M.05 3.197L12 10.999 23.95 3.197zM0 4.609v14.075c0 1.284 1.041 2.325 2.325 2.325h19.35c1.284 0 2.325-1.041 2.325-2.325V4.609L12 12.607 0 4.609z"/>
</svg>
</a>
</div>
</div>
</div>
<!-- Profile Card 6 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border-t-4 border-blue-600 dark:border-blue-500">
<div class="p-6">
<div class="flex flex-col items-center">
<img class="h-32 w-32 rounded-full object-cover mb-4 ring-4 ring-blue-200 dark:ring-blue-700" src="https://randomuser.me/api/portraits/men/21.jpg" alt="Michael Brown">
<h3 class="text-2xl font-semibold text-blue-700 dark:text-blue-300">Michael Brown</h3>
<p class="text-md text-gray-500 dark:text-gray-400 font-medium mb-3">Communications Specialist</p>
<p class="text-center text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
Michael shares our story with the world, crafting compelling narratives and engaging content.
</p>
</div>
<div class="mt-6 flex justify-center space-x-4">
<a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200" aria-label="LinkedIn">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.535-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200" aria-label="Email">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M.05 3.197L12 10.999 23.95 3.197zM0 4.609v14.075c0 1.284 1.041 2.325 2.325 2.325h19.35c1.284 0 2.325-1.041 2.325-2.325V4.609L12 12.607 0 4.609z"/>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</section>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.
User Profiles Component
A simple, responsive user profile component with a watercolor/artistic style and a gradient rainbow color scheme, suitable for marketplace platforms. Includes dark mode support.
Neumorphism User Profiles Component with Vibrant colors
Neumorphism User Profiles Component with Vibrant colors for Business/Corporate websites, responsive design with dark theme support.