User Profiles 组件
一个复杂的响应式用户配置文件组件，专为食品/餐厅网站设计，具有具有高对比度颜色的深色模式 UI。包括多个用户卡，其中包含个人资料信息和行动号召。
HTML 代码
<div class="bg-gray-950 min-h-screen text-gray-100 p-4 sm:p-6 lg:p-8 dark:bg-zinc-950">
<div class="container mx-auto max-w-7xl">
<h2 class="text-4xl sm:text-5xl font-extrabold text-white mb-8 sm:mb-12 text-center">
Our Featured Foodies
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
<!-- User Profile Card 1 -->
<div class="bg-gray-900 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl dark:bg-zinc-900">
<div class="relative h-48 sm:h-56 bg-gradient-to-r from-purple-700 to-indigo-700 dark:from-purple-900 dark:to-indigo-900">
<img class="w-full h-full object-cover" src="https://picsum.photos/600/400?random=1" alt="User food background">
<div class="absolute inset-0 bg-black/60 flex items-center justify-center">
<img class="w-28 h-28 sm:w-32 sm:h-32 rounded-full border-4 border-yellow-400 object-cover shadow-lg" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Profile Picture">
</div>
</div>
<div class="p-6 sm:p-8 text-center">
<h3 class="text-3xl font-bold text-yellow-400 mt-4 mb-2">Sarah L.</h3>
<p class="text-gray-300 text-lg sm:text-xl mb-4">Food Blogger & Recipe Creator</p>
<div class="flex justify-center flex-wrap gap-2 sm:gap-3 mb-6">
<span class="bg-purple-800 text-purple-100 text-xs sm:text-sm px-3 py-1 rounded-full font-semibold dark:bg-purple-700">Vegan Enthusiast</span>
<span class="bg-blue-800 text-blue-100 text-xs sm:text-sm px-3 py-1 rounded-full font-semibold dark:bg-blue-700">Dessert Lover</span>
<span class="bg-emerald-800 text-emerald-100 text-xs sm:text-sm px-3 py-1 rounded-full font-semibold dark:bg-emerald-700">Home Cook</span>
</div>
<p class="text-gray-400 leading-relaxed mb-6 line-clamp-3">"Passionate about plant-based cuisine, I love experimenting with fresh ingredients to create delicious and healthy meals from scratch. My kitchen is my happy place!"</p>
<a href="#" class="inline-block bg-yellow-500 text-gray-900 font-bold py-3 px-8 rounded-full transition-all duration-300 hover:bg-yellow-400 hover:scale-105 shadow-lg text-lg">
View Recipes
</a>
</div>
</div>
<!-- User Profile Card 2 -->
<div class="bg-gray-900 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl dark:bg-zinc-900">
<div class="relative h-48 sm:h-56 bg-gradient-to-r from-red-700 to-orange-700 dark:from-red-900 dark:to-orange-900">
<img class="w-full h-full object-cover" src="https://picsum.photos/600/400?random=2" alt="User food background">
<div class="absolute inset-0 bg-black/60 flex items-center justify-center">
<img class="w-28 h-28 sm:w-32 sm:h-32 rounded-full border-4 border-yellow-400 object-cover shadow-lg" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Profile Picture">
</div>
</div>
<div class="p-6 sm:p-8 text-center">
<h3 class="text-3xl font-bold text-yellow-400 mt-4 mb-2">David M.</h3>
<p class="text-gray-300 text-lg sm:text-xl mb-4">Restaurant Critic & Foodie</p>
<div class="flex justify-center flex-wrap gap-2 sm:gap-3 mb-6">
<span class="bg-purple-800 text-purple-100 text-xs sm:text-sm px-3 py-1 rounded-full font-semibold dark:bg-purple-700">Fine Dining</span>
<span class="bg-blue-800 text-blue-100 text-xs sm:text-sm px-3 py-1 rounded-full font-semibold dark:bg-blue-700">Street Food</span>
<span class="bg-emerald-800 text-emerald-100 text-xs sm:text-sm px-3 py-1 rounded-full font-semibold dark:bg-emerald-700">Traveler</span>
</div>
<p class="text-gray-400 leading-relaxed mb-6 line-clamp-3">"I travel the world seeking unique culinary experiences, from Michelin-starred restaurants to hidden street food gems. Food is my passion and my adventure!"</p>
<a href="#" class="inline-block bg-yellow-500 text-gray-900 font-bold py-3 px-8 rounded-full transition-all duration-300 hover:bg-yellow-400 hover:scale-105 shadow-lg text-lg">
Read Reviews
</a>
</div>
</div>
<!-- User Profile Card 3 -->
<div class="bg-gray-900 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl dark:bg-zinc-900">
<div class="relative h-48 sm:h-56 bg-gradient-to-r from-emerald-700 to-teal-700 dark:from-emerald-900 dark:to-teal-900">
<img class="w-full h-full object-cover" src="https://picsum.photos/600/400?random=3" alt="User food background">
<div class="absolute inset-0 bg-black/60 flex items-center justify-center">
<img class="w-28 h-28 sm:w-32 sm:h-32 rounded-full border-4 border-yellow-400 object-cover shadow-lg" src="https://randomuser.me/api/portraits/women/3.jpg" alt="Profile Picture">
</div>
</div>
<div class="p-6 sm:p-8 text-center">
<h3 class="text-3xl font-bold text-yellow-400 mt-4 mb-2">Jessica P.</h3>
<p class="text-gray-300 text-lg sm:text-xl mb-4">Baking Expert & Instructor</p>
<div class="flex justify-center flex-wrap gap-2 sm:gap-3 mb-6">
<span class="bg-purple-800 text-purple-100 text-xs sm:text-sm px-3 py-1 rounded-full font-semibold dark:bg-purple-700">Pastries</span>
<span class="bg-blue-800 text-blue-100 text-xs sm:text-sm px-3 py-1 rounded-full font-semibold dark:bg-blue-700">Bread Making</span>
<span class="bg-emerald-800 text-emerald-100 text-xs sm:text-sm px-3 py-1 rounded-full font-semibold dark:bg-emerald-700">Gluten-Free</span>
</div>
<p class="text-gray-400 leading-relaxed mb-6 line-clamp-3">"There's nothing more satisfying than the smell of freshly baked goods. I love teaching others the joy of baking and sharing my sweetest creations!"</p>
<a href="#" class="inline-block bg-yellow-500 text-gray-900 font-bold py-3 px-8 rounded-full transition-all duration-300 hover:bg-yellow-400 hover:scale-105 shadow-lg text-lg">
Explore Courses
</a>
</div>
</div>
</div>
</div>
</div>