Componente Perfiles de usuario
Un componente de perfiles de usuario receptivo para organizaciones sin fines de lucro/benéficas, con un diseño de lujo/premium con tonos azules profesionales, soporte para modo oscuro y tipografía sofisticada.
Código HTML
<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>Componentes relacionados
Componente Perfiles de usuario neumórficos
Un componente de perfiles de usuario complejo y receptivo con un estilo de diseño neumórfico y un esquema de color océano/azul, adecuado para sitios web comerciales/corporativos. Incluye soporte para modo oscuro.
Componente Perfiles de usuario
Componente de perfiles de usuario receptivos con microinteracciones, combinación de colores vibrantes y nivel de complejidad simple para la cartera.
Perfil de usuario Tarjeta simple
Tarjeta de perfil de usuario receptiva con Tailwind CSS, diseño de materiales, combinación de colores de tonos tierra. Compatible con el modo oscuro, no se necesita JS.