Componente Perfiles de usuario
Un componente de perfiles de usuario receptivo y minimalista para redes sociales, con múltiples perfiles con información del usuario, botones de seguimiento y soporte para modo oscuro. Utiliza un esquema de color análogo.
Código 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>Componentes relacionados
Tarjeta de perfil de usuario neumórfico
Una tarjeta de perfil de usuario simple y responsiva con una estética de diseño neumórfico utilizando tonos tierra, adecuada para tableros. Incluye soporte para modo oscuro.
Componente Perfiles de usuario
Componente de perfiles de usuario con diseño de neumorfismo, efectos responsivos y compatibilidad con temas oscuros.
Tarjeta de perfil de usuario neumórfico - Pastel
Una tarjeta de perfil de usuario simple y receptiva con un diseño neumórfico de temática pastel, adecuada para carteras, incluida la compatibilidad con el modo oscuro.