사용자 프로필 구성 요소
비영리/자선 단체를 위한 반응형 사용자 프로필 구성 요소로, 전문적인 블루 톤, 다크 모드 지원 및 세련된 타이포그래피가 있는 고급스러움/프리미엄 디자인이 특징입니다.
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>관련 구성 요소
사용자 프로필 구성 요소
암호화폐/블록체인 애플리케이션을 위해 설계된 반응형의 전문적인 사용자 프로필 구성 요소로, 보색 구성표와 다크 모드 지원과 함께 깨끗하고 신뢰할 수 있는 디자인을 특징으로 합니다.
사용자 프로필 구성 요소
트라이어딕 색 구성표가 있는 브루탈리즘 스타일로 디자인된 사용자 프로필 구성 요소로, 블로그/콘텐츠 소비에 적합한 적당한 복잡성과 어두운 테마를 지원하는 반응형 디자인을 특징으로 합니다.
사용자 프로필 구성 요소
마켓플레이스를 위한 간단하고 반응이 빠른 사용자 프로필 카드로, 기업용 블루 톤과 다크 모드를 지원하는 유기적/자연에서 영감을 받은 디자인이 특징입니다.