Componente Profili Utente - Luxury Sepia
Un componente complesso di profili utente a tema lusso con toni seppia/marrone, ottimizzato per blog/siti di contenuti. Presenta una tipografia elegante, un design reattivo e il supporto per la modalità scura.
Codice 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>Componenti correlati
Componente Profili utente
Componente Profili utente con design del neumorfismo, effetti reattivi e supporto per temi scuri.
Cyberpunk_User_Profiles_Component
Un componente di profili utente complesso e reattivo con un'estetica cyberpunk e una calda combinazione di colori al tramonto, adatto per siti Web di viaggi/turismo. Dispone di supporto per la modalità oscura, accenti al neon ed elementi interattivi.
Componente Profili utente
Un componente del profilo utente semplice e reattivo con uno stile acquerello/artistico e una combinazione di colori arcobaleno sfumato, adatto per le piattaforme di marketplace. Include il supporto per la modalità scura.