Composant Profils utilisateur
Un composant de profils d’utilisateurs réactif pour les organisations à but non lucratif/caritatives, avec un design luxueux/haut de gamme avec des tons bleus professionnels, la prise en charge du mode sombre et une typographie sophistiquée.
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>Composants associés
Composant Profils utilisateur
Un composant de profils d’utilisateur conçu dans un style brutaliste avec une palette de couleurs triadique, avec une complexité modérée adaptée à la consommation de blog/contenu, et une conception réactive avec prise en charge du thème sombre.
Composant Profils d’utilisateur neumorphes
Un composant complexe et réactif de profils d’utilisateurs avec un style de conception neumorphique et une palette de couleurs océan/bleu, adapté aux sites Web d’entreprise. Inclut la prise en charge du mode sombre.
Composant Profils utilisateur
Un composant de profil d’utilisateur réactif avec une esthétique de conception 3D et une palette de couleurs de terre, adapté aux sites Web de voyage et de tourisme. Inclut la prise en charge du mode sombre.