사용자 프로필 구성 요소 - Luxury Sepia
세피아/갈색 톤의 복잡한 럭셔리 테마 사용자 프로필 구성 요소로, 블로그/콘텐츠 사이트에 최적화되어 있습니다. 우아한 타이포그래피, 반응형 디자인, 다크 모드 지원이 특징입니다.
HTML 코드
<div class="bg-stone-50 dark:bg-stone-900 min-h-screen p-4 sm:p-6 md:p-8 font-serif text-stone-800 dark:text-stone-200 transition-colors duration-300">
<!-- Component Header -->
<div class="text-center mb-12">
<h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold text-stone-900 dark:text-stone-50 mb-4 tracking-tight leading-tight">
Our Esteemed Contributors
</h1>
<p class="text-lg sm:text-xl text-stone-700 dark:text-stone-300 max-w-3xl mx-auto opacity-90">
Discover the brilliant minds behind our captivating content. Each profile reflects their unique expertise and passion.
</p>
</div>
<div class="container mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 xl:gap-12">
<!-- User Profile Card 1 -->
<div class="bg-white dark:bg-stone-800 rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden border border-stone-200 dark:border-stone-700 relative">
<div class="absolute inset-0 bg-gradient-to-br from-stone-50 dark:from-stone-800 via-stone-100 dark:via-stone-700 to-stone-200 dark:to-stone-600 opacity-60 dark:opacity-40 rounded-2xl"></div>
<div class="relative p-6 sm:p-8 z-10">
<div class="flex flex-col items-center text-center mb-6">
<img class="w-32 h-32 rounded-full object-cover border-4 border-stone-300 dark:border-stone-600 shadow-md transform hover:scale-105 transition-transform duration-300" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Alice Johnson Profile">
<h2 class="text-3xl font-bold mt-4 text-stone-900 dark:text-stone-100">Alice Johnson</h2>
<p class="text-base text-stone-600 dark:text-stone-400 italic">Senior Editor & Historian</p>
</div>
<p class="text-stone-700 dark:text-stone-300 leading-relaxed mb-6 border-dotted border-b border-stone-300 dark:border-stone-600 pb-6">
Alice is a passionate historian specializing in ancient civilizations. Her articles bring the past to life with meticulous research and compelling narratives. She holds a Ph.D. in Archaeology from Oxford University.
</p>
<div class="grid grid-cols-2 gap-4 text-stone-700 dark:text-stone-300 mb-6">
<div>
<p class="font-semibold text-stone-800 dark:text-stone-200">Articles Published:</p>
<span class="text-xl font-bold text-stone-900 dark:text-stone-100">78</span>
</div>
<div class="text-right">
<p class="font-semibold text-stone-800 dark:text-stone-200 text-right">Joined:</p>
<span class="text-xl font-bold text-stone-900 dark:text-stone-100">2018</span>
</div>
</div>
<div class="mb-6">
<h3 class="text-lg font-semibold text-stone-800 dark:text-stone-200 mb-2">Featured Work:</h3>
<div class="flex space-x-3 overflow-x-auto pb-2 scrollbar-hide">
<img class="w-24 h-16 rounded-md object-cover shadow-sm border border-stone-200 dark:border-stone-700 transform hover:scale-105 transition-transform duration-300 cursor-pointer" src="https://picsum.photos/id/1018/120/80" alt="Article 1">
<img class="w-24 h-16 rounded-md object-cover shadow-sm border border-stone-200 dark:border-stone-700 transform hover:scale-105 transition-transform duration-300 cursor-pointer" src="https://picsum.photos/id/1025/120/80" alt="Article 2">
<img class="w-24 h-16 rounded-md object-cover shadow-sm border border-stone-200 dark:border-stone-700 transform hover:scale-105 transition-transform duration-300 cursor-pointer" src="https://picsum.photos/id/1033/120/80" alt="Article 3">
</div>
</div>
<div class="flex justify-around mt-6 pt-6 border-t border-dotted border-stone-300 dark:border-stone-600">
<a href="#" class="text-stone-700 dark:text-stone-300 hover:text-stone-900 dark:hover:text-stone-100 transition-colors duration-200 flex items-center">
<svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM5 9a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1zm-.195 2.5a.5.5 0 00-.81.65l3.25 4.5a.5.5 0 00.81-.65L4.805 11.5zM15 11a1 1 0 100 2h1a1 1 0 100-2h-1zm-3.342-6.6a1 1 0 00-1.316 0L5.38 8.167A1 1 0 006.18 9.833L9 6.556l2.82 3.277a1 1 0 001.62-.833L10.658 4.4z"></path></svg>
<span class="hidden sm:inline">View Articles</span>
</a>
<a href="#" class="text-stone-700 dark:text-stone-300 hover:text-stone-900 dark:hover:text-stone-100 transition-colors duration-200 flex items-center">
<svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z"></path><path d="M15 7v2a4 4 0 01-4 4H9.586l-1.828 1.828A4 4 0 0012.004 20h4.002A2 2 0 0018 18V9a2 2 0 00-2-2h-1z"></path></svg>
<span class="hidden sm:inline">Contact</span>
</a>
</div>
</div>
</div>
<!-- User Profile Card 2 -->
<div class="bg-white dark:bg-stone-800 rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden border border-stone-200 dark:border-stone-700 relative">
<div class="absolute inset-0 bg-gradient-to-br from-stone-50 dark:from-stone-800 via-stone-100 dark:via-stone-700 to-stone-200 dark:to-stone-600 opacity-60 dark:opacity-40 rounded-2xl"></div>
<div class="relative p-6 sm:p-8 z-10">
<div class="flex flex-col items-center text-center mb-6">
<img class="w-32 h-32 rounded-full object-cover border-4 border-stone-300 dark:border-stone-600 shadow-md transform hover:scale-105 transition-transform duration-300" src="https://randomuser.me/api/portraits/men/77.jpg" alt="David Lee Profile">
<h2 class="text-3xl font-bold mt-4 text-stone-900 dark:text-stone-100">David Lee</h2>
<p class="text-base text-stone-600 dark:text-stone-400 italic">Science & Technology Writer</p>
</div>
<p class="text-stone-700 dark:text-stone-300 leading-relaxed mb-6 border-dotted border-b border-stone-300 dark:border-stone-600 pb-6">
David is an award-winning science journalist with a gift for making complex topics accessible. His work explores breakthroughs in AI, space exploration, and sustainable technologies. He holds an M.S. in Physics.
</p>
<div class="grid grid-cols-2 gap-4 text-stone-700 dark:text-stone-300 mb-6">
<div>
<p class="font-semibold text-stone-800 dark:text-stone-200">Articles Published:</p>
<span class="text-xl font-bold text-stone-900 dark:text-stone-100">62</span>
</div>
<div class="text-right">
<p class="font-semibold text-stone-800 dark:text-stone-200 text-right">Joined:</p>
<span class="text-xl font-bold text-stone-900 dark:text-stone-100">2019</span>
</div>
</div>
<div class="mb-6">
<h3 class="text-lg font-semibold text-stone-800 dark:text-stone-200 mb-2">Featured Work:</h3>
<div class="flex space-x-3 overflow-x-auto pb-2 scrollbar-hide">
<img class="w-24 h-16 rounded-md object-cover shadow-sm border border-stone-200 dark:border-stone-700 transform hover:scale-105 transition-transform duration-300 cursor-pointer" src="https://picsum.photos/id/1041/120/80" alt="Article 4">
<img class="w-24 h-16 rounded-md object-cover shadow-sm border border-stone-200 dark:border-stone-700 transform hover:scale-105 transition-transform duration-300 cursor-pointer" src="https://picsum.photos/id/1043/120/80" alt="Article 5">
<img class="w-24 h-16 rounded-md object-cover shadow-sm border border-stone-200 dark:border-stone-700 transform hover:scale-105 transition-transform duration-300 cursor-pointer" src="https://picsum.photos/id/1044/120/80" alt="Article 6">
</div>
</div>
<div class="flex justify-around mt-6 pt-6 border-t border-dotted border-stone-300 dark:border-stone-600">
<a href="#" class="text-stone-700 dark:text-stone-300 hover:text-stone-900 dark:hover:text-stone-100 transition-colors duration-200 flex items-center">
<svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM5 9a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1zm-.195 2.5a.5.5 0 00-.81.65l3.25 4.5a.5.5 0 00.81-.65L4.805 11.5zM15 11a1 1 0 100 2h1a1 1 0 100-2h-1zm-3.342-6.6a1 1 0 00-1.316 0L5.38 8.167A1 1 0 006.18 9.833L9 6.556l2.82 3.277a1 1 0 001.62-.833L10.658 4.4z"></path></svg>
<span class="hidden sm:inline">View Articles</span>
</a>
<a href="#" class="text-stone-700 dark:text-stone-300 hover:text-stone-900 dark:hover:text-stone-100 transition-colors duration-200 flex items-center">
<svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z"></path><path d="M15 7v2a4 4 0 01-4 4H9.586l-1.828 1.828A4 4 0 0012.004 20h4.002A2 2 0 0018 18V9a2 2 0 00-2-2h-1z"></path></svg>
<span class="hidden sm:inline">Contact</span>
</a>
</div>
</div>
</div>
<!-- User Profile Card 3 -->
<div class="bg-white dark:bg-stone-800 rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden border border-stone-200 dark:border-stone-700 relative">
<div class="absolute inset-0 bg-gradient-to-br from-stone-50 dark:from-stone-800 via-stone-100 dark:via-stone-700 to-stone-200 dark:to-stone-600 opacity-60 dark:opacity-40 rounded-2xl"></div>
<div class="relative p-6 sm:p-8 z-10">
<div class="flex flex-col items-center text-center mb-6">
<img class="w-32 h-32 rounded-full object-cover border-4 border-stone-300 dark:border-stone-600 shadow-md transform hover:scale-105 transition-transform duration-300" src="https://randomuser.me/api/portraits/women/66.jpg" alt="Sophia Kim Profile">
<h2 class="text-3xl font-bold mt-4 text-stone-900 dark:text-stone-100">Sophia Kim</h2>
<p class="text-base text-stone-600 dark:text-stone-400 italic">Lifestyle & Travel Blogger</p>
</div>
<p class="text-stone-700 dark:text-stone-300 leading-relaxed mb-6 border-dotted border-b border-stone-300 dark:border-stone-600 pb-6">
Sophia captures the essence of global cultures and sustainable living. Her inspiring tales and stunning photography transport readers to vibrant destinations. She is a recognized voice in ethical travel.
</p>
<div class="grid grid-cols-2 gap-4 text-stone-700 dark:text-stone-300 mb-6">
<div>
<p class="font-semibold text-stone-800 dark:text-stone-200">Articles Published:</p>
<span class="text-xl font-bold text-stone-900 dark:text-stone-100">91</span>
</div>
<div class="text-right">
<p class="font-semibold text-stone-800 dark:text-stone-200 text-right">Joined:</p>
<span class="text-xl font-bold text-stone-900 dark:text-stone-100">2017</span>
</div>
</div>
<div class="mb-6">
<h3 class="text-lg font-semibold text-stone-800 dark:text-stone-200 mb-2">Featured Work:</h3>
<div class="flex space-x-3 overflow-x-auto pb-2 scrollbar-hide">
<img class="w-24 h-16 rounded-md object-cover shadow-sm border border-stone-200 dark:border-stone-700 transform hover:scale-105 transition-transform duration-300 cursor-pointer" src="https://picsum.photos/id/1050/120/80" alt="Article 7">
<img class="w-24 h-16 rounded-md object-cover shadow-sm border border-stone-200 dark:border-stone-700 transform hover:scale-105 transition-transform duration-300 cursor-pointer" src="https://picsum.photos/id/1052/120/80" alt="Article 8">
<img class="w-24 h-16 rounded-md object-cover shadow-sm border border-stone-200 dark:border-stone-700 transform hover:scale-105 transition-transform duration-300 cursor-pointer" src="https://picsum.photos/id/1057/120/80" alt="Article 9">
</div>
</div>
<div class="flex justify-around mt-6 pt-6 border-t border-dotted border-stone-300 dark:border-stone-600">
<a href="#" class="text-stone-700 dark:text-stone-300 hover:text-stone-900 dark:hover:text-stone-100 transition-colors duration-200 flex items-center">
<svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM5 9a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1zm-.195 2.5a.5.5 0 00-.81.65l3.25 4.5a.5.5 0 00.81-.65L4.805 11.5zM15 11a1 1 0 100 2h1a1 1 0 100-2h-1zm-3.342-6.6a1 1 0 00-1.316 0L5.38 8.167A1 1 0 006.18 9.833L9 6.556l2.82 3.277a1 1 0 001.62-.833L10.658 4.4z"></path></svg>
<span class="hidden sm:inline">View Articles</span>
</a>
<a href="#" class="text-stone-700 dark:text-stone-300 hover:text-stone-900 dark:hover:text-stone-100 transition-colors duration-200 flex items-center">
<svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z"></path><path d="M15 7v2a4 4 0 01-4 4H9.586l-1.828 1.828A4 4 0 0012.004 20h4.002A2 2 0 0018 18V9a2 2 0 00-2-2h-1z"></path></svg>
<span class="hidden sm:inline">Contact</span>
</a>
</div>
</div>
</div>
</div>
</div>
<style>
/* Hide scrollbar for featured work on Webkit browsers */
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
/* For IE, Edge and Firefox */
.scrollbar-hide {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
</style>관련 구성 요소
사용자 프로필 구성 요소
Tailwind CSS로 구축된 다크 모드 파스텔 테마가 있는 대시보드용 반응형 사용자 프로필 구성 요소입니다. 사용자 아바타, 이름, 역할 및 간단한 설명이 팔로우 버튼과 함께 표시됩니다. 디자인은 다양한 화면 크기에 맞게 조정되고 시스템 기본 설정에 따라 다크 모드를 지원합니다.
사용자 프로필 구성 요소
소셜 미디어를 위한 반응형의 미니멀한 사용자 프로필 구성 요소로, 사용자 정보, 팔로우 버튼 및 다크 모드 지원이 포함된 여러 프로필을 제공합니다. 유사한 색 구성표를 사용합니다.
Cyberpunk_User_Profiles_Component
사이버펑크 미학과 따뜻한 일몰 색 구성표를 갖춘 복잡하고 반응이 빠른 사용자 프로필 구성 요소로 여행/관광 웹 사이트에 적합합니다. 다크 모드 지원, 네온 액센트 및 인터랙티브 요소가 특징입니다.