Componentes
Perfiles de usuario
Componente de perfiles de usuario de neumorfismo con colores vibrantes
Componente de perfiles de usuario de neumorfismo con colores vibrantes
Componente de perfiles de usuario de neumorfismo con colores vibrantes para sitios web comerciales / corporativos, diseño receptivo con soporte para temas oscuros.
Código HTML
<div class="min-h-screen flex items-center justify-center bg-gray-200 dark:bg-gray-800 p-10">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
<!-- Profile Card 1 -->
<div class="w-full max-w-sm bg-gray-200 dark:bg-gray-700 rounded-xl p-6 shadow-neumorphism-light dark:shadow-neumorphism-dark">
<div class="flex flex-col items-center pb-10">
<img class="w-24 h-24 mb-3 rounded-full shadow-neumorphism-light dark:shadow-neumorphism-dark" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Bonnie image"/>
<h5 class="mb-1 text-xl font-medium text-gray-900 dark:text-white">Bonnie Green</h5>
<span class="text-sm text-gray-500 dark:text-gray-400">UI/UX Designer</span>
<div class="flex mt-4 space-x-3 md:mt-6">
<a href="#" class="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 focus:ring-4 focus:outline-none focus:ring-indigo-300 dark:bg-indigo-500 dark:hover:bg-indigo-600 dark:focus:ring-indigo-800 shadow-neumorphism-light dark:shadow-neumorphism-dark">View Profile</a>
<a href="#" class="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-gray-900 bg-gray-100 border border-gray-300 rounded-lg hover:bg-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-200 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-700 shadow-neumorphism-light dark:shadow-neumorphism-dark">Message</a>
</div>
</div>
</div>
<!-- Profile Card 2 -->
<div class="w-full max-w-sm bg-gray-200 dark:bg-gray-700 rounded-xl p-6 shadow-neumorphism-light dark:shadow-neumorphism-dark">
<div class="flex flex-col items-center pb-10">
<img class="w-24 h-24 mb-3 rounded-full shadow-neumorphism-light dark:shadow-neumorphism-dark" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Bonnie image"/>
<h5 class="mb-1 text-xl font-medium text-gray-900 dark:text-white">Jese Leos</h5>
<span class="text-sm text-gray-500 dark:text-gray-400">Marketing Specialist</span>
<div class="flex mt-4 space-x-3 md:mt-6">
<a href="#" class="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-white bg-pink-600 rounded-lg hover:bg-pink-700 focus:ring-4 focus-outline-none focus:ring-pink-300 dark:bg-pink-500 dark:hover:bg-pink-600 dark:focus:ring-pink-800 shadow-neumorphism-light dark:shadow-neumorphism-dark">View Profile</a>
<a href="#" class="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-gray-900 bg-gray-100 border border-gray-300 rounded-lg hover:bg-gray-200 focus:ring-4 focus-outline-none focus:ring-gray-200 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-700 shadow-neumorphism-light dark:shadow-neumorphism-dark">Message</a>
</div>
</div>
</div>
<!-- Profile Card 3 -->
<div class="w-full max-w-sm bg-gray-200 dark:bg-gray-700 rounded-xl p-6 shadow-neumorphism-light dark:shadow-neumorphism-dark">
<div class="flex flex-col items-center pb-10">
<img class="w-24 h-24 mb-3 rounded-full shadow-neumorphism-light dark:shadow-neumorphism-dark" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Bonnie image"/>
<h5 class="mb-1 text-xl font-medium text-gray-900 dark:text-white">Robert Gough</h5>
<span class="text-sm text-gray-500 dark:text-gray-400">Software Engineer</span>
<div class="flex mt-4 space-x-3 md:mt-6">
<a href="#" class="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-white bg-green-600 rounded-lg hover:bg-green-700 focus:ring-4 focus-outline-none focus:ring-green-300 dark:bg-green-500 dark:hover:bg-green-600 dark:focus:ring-green-800 shadow-neumorphism-light dark:shadow-neumorphism-dark">View Profile</a>
<a href="#" class="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-gray-900 bg-gray-100 border border-gray-300 rounded-lg hover:bg-gray-200 focus:ring-4 focus-outline-none focus:ring-gray-200 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-700 shadow-neumorphism-light dark:shadow-neumorphism-dark">Message</a>
</div>
</div>
</div>
</div>
</div>
<style>
.shadow-neumorphism-light {
box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
}
.dark .shadow-neumorphism-dark {
box-shadow: 7px 7px 15px #4a4a4a, -7px -7px 15px #666666;
}
</style>Componentes relacionados
Componente Perfiles de usuario
Un componente de perfiles de usuario complejo y receptivo para sitios web de noticias/periodismo, con un diseño inspirado en la Bauhaus con un esquema de colores brillantes y dulces/dulces y compatibilidad con el modo oscuro. Muestra múltiples perfiles de usuario con imágenes de perfil, nombres, títulos y recuentos de seguidores, diseñados para una interfaz enriquecida.
Componente de perfiles de usuario - Tema Dark Forest
Un componente de perfil de usuario simple y receptivo diseñado para plataformas de bienes raíces, con un esquema de color verde bosque oscuro y soporte completo para el modo oscuro.
Componente Perfiles de usuario
Un componente de perfiles de usuario diseñado en un estilo brutalista utilizando Tailwind CSS, con un esquema de color monocromático y que proporciona una interfaz para las redes sociales. Es compatible con el modo oscuro y responde.