User Profiles 组件
一个用于社交媒体的响应式极简用户配置文件组件，具有多个包含用户信息、关注按钮和深色模式支持的配置文件。使用类似的配色方案。
HTML 代码
<div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-indigo-50 to-purple-50 dark:from-slate-900 dark:to-gray-900 min-h-screen font-sans">
<div class="max-w-6xl mx-auto">
<h2 class="text-3xl sm:text-4xl font-extrabold text-gray-800 dark:text-gray-100 mb-8 text-center">
Featured Profiles
</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<!-- Profile Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 p-6 flex flex-col items-center text-center border border-gray-100 dark:border-gray-700">
<img class="w-24 h-24 rounded-full object-cover mb-4 ring-2 ring-indigo-300 dark:ring-purple-500" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Profile picture of Jane Doe">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">Jane Doe</h3>
<p class="text-sm text-gray-500 dark:text-gray-400 mb-4">@janedo_e</p>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">Passionate photographer exploring the world's hidden beauty through my lens. Sharing moments, one click at a time.</p>
<div class="flex justify-center gap-4 mb-4">
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">1.2K</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Followers</p>
</div>
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">350</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Following</p>
</div>
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">98</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Posts</p>
</div>
</div>
<button class="w-full py-2 px-4 rounded-lg bg-indigo-500 text-white font-medium hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 transition duration-300 dark:bg-purple-600 dark:hover:bg-purple-700">
Follow
</button>
</div>
<!-- Profile Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 p-6 flex flex-col items-center text-center border border-gray-100 dark:border-gray-700">
<img class="w-24 h-24 rounded-full object-cover mb-4 ring-2 ring-purple-300 dark:ring-indigo-500" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Profile picture of John Smith">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">John Smith</h3>
<p class="text-sm text-gray-500 dark:text-gray-400 mb-4">@johns_dev</p>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">Frontend developer building engaging user experiences. Passionate about clean code and modern web technologies.</p>
<div class="flex justify-center gap-4 mb-4">
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">870</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Followers</p>
</div>
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">210</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Following</p>
</div>
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">65</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Posts</p>
</div>
</div>
<button class="w-full py-2 px-4 rounded-lg bg-indigo-500 text-white font-medium hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 transition duration-300 dark:bg-purple-600 dark:hover:bg-purple-700">
Follow
</button>
</div>
<!-- Profile Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 p-6 flex flex-col items-center text-center border border-gray-100 dark:border-gray-700">
<img class="w-24 h-24 rounded-full object-cover mb-4 ring-2 ring-indigo-300 dark:ring-purple-500" src="https://randomuser.me/api/portraits/women/3.jpg" alt="Profile picture of Sarah Lee">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">Sarah Lee</h3>
<p class="text-sm text-gray-500 dark:text-gray-400 mb-4">@sarah_art</p>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">Digital artist and illustrator. Turning imagination into vivid colors and captivating visuals. Always learning, always creating.</p>
<div class="flex justify-center gap-4 mb-4">
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">1.5K</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Followers</p>
</div>
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">400</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Following</p>
</div>
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">120</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Posts</p>
</div>
</div>
<button class="w-full py-2 px-4 rounded-lg bg-indigo-500 text-white font-medium hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 transition duration-300 dark:bg-purple-600 dark:hover:bg-purple-700">
Follow
</button>
</div>
<!-- Profile Card 4 -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 p-6 flex flex-col items-center text-center border border-gray-100 dark:border-gray-700">
<img class="w-24 h-24 rounded-full object-cover mb-4 ring-2 ring-purple-300 dark:ring-indigo-500" src="https://randomuser.me/api/portraits/men/4.jpg" alt="Profile picture of Mike Ross">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">Mike Ross</h3>
<p class="text-sm text-gray-500 dark:text-gray-400 mb-4">@mikero_ss</p>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">Travel enthusiast documenting journeys across continents. Seeking adventure and sharing the beauty of different cultures.</p>
<div class="flex justify-center gap-4 mb-4">
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">950</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Followers</p>
</div>
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">280</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Following</p>
</div>
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">80</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Posts</p>
</div>
</div>
<button class="w-full py-2 px-4 rounded-lg bg-indigo-500 text-white font-medium hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 transition duration-300 dark:bg-purple-600 dark:hover:bg-purple-700">
Follow
</button>
</div>
<!-- Profile Card 5 -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 p-6 flex flex-col items-center text-center border border-gray-100 dark:border-gray-700">
<img class="w-24 h-24 rounded-full object-cover mb-4 ring-2 ring-indigo-300 dark:ring-purple-500" src="https://randomuser.me/api/portraits/women/5.jpg" alt="Profile picture of Emily White">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">Emily White</h3>
<p class="text-sm text-gray-500 dark:text-gray-400 mb-4">@emily_reads</p>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">Book lover and aspiring writer. Diving into new worlds, one page at a time. Sharing reviews and literary thoughts.</p>
<div class="flex justify-center gap-4 mb-4">
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">720</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Followers</p>
</div>
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">190</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Following</p>
</div>
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">55</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Posts</p>
</div>
</div>
<button class="w-full py-2 px-4 rounded-lg bg-indigo-500 text-white font-medium hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 transition duration-300 dark:bg-purple-600 dark:hover:bg-purple-700">
Follow
</button>
</div>
<!-- Profile Card 6 -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 p-6 flex flex-col items-center text-center border border-gray-100 dark:border-gray-700">
<img class="w-24 h-24 rounded-full object-cover mb-4 ring-2 ring-purple-300 dark:ring-indigo-500" src="https://randomuser.me/api/portraits/men/6.jpg" alt="Profile picture of David Green">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">David Green</h3>
<p class="text-sm text-gray-500 dark:text-gray-400 mb-4">@david_music</p>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">Musician and composer. Creating melodies that tell stories. Exploring sounds from classical to electronic.</p>
<div class="flex justify-center gap-4 mb-4">
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">1.1K</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Followers</p>
</div>
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">300</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Following</p>
</div>
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">110</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Posts</p>
</div>
</div>
<button class="w-full py-2 px-4 rounded-lg bg-indigo-500 text-white font-medium hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 transition duration-300 dark:bg-purple-600 dark:hover:bg-purple-700">
Follow
</button>
</div>
</div>
</div>
</div>