Neumorfismo de los componentes de las columnas
Nemorfismo de los componentes de las columnas: un estilo de interfaz de usuario suave que crea elementos que parecen sobresalir del fondo mediante sombras sutiles. Este componente es responsivo y tiene soporte para temas oscuros. No se necesita código JavaScript. Para el modo oscuro, la compatibilidad con CSS es suficiente.
Código HTML
<div class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4 p-4 dark:bg-gray-800">
<div class="flex-1 bg-gray-100 dark:bg-gray-700 p-6 rounded-xl shadow-xl dark:shadow-xl-dark flex flex-col items-center">
<img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Column 1</h3>
<p class="text-gray-600 dark:text-gray-300 text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="flex-1 bg-gray-100 dark:bg-gray-700 p-6 rounded-xl shadow-xl dark:shadow-xl-dark flex flex-col items-center">
<img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Column 2</h3>
<p class="text-gray-600 dark:text-gray-300 text-center">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="flex-1 bg-gray-100 dark:bg-gray-700 p-6 rounded-xl shadow-xl dark:shadow-xl-dark flex flex-col items-center">
<img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/men/4.jpg" alt="Avatar">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Column 3</h3>
<p class="text-gray-600 dark:text-gray-300 text-center">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
<style>
/* Basic Neumorphism shadows - adjust values for desired effect */
.shadow-xl {
box-shadow: 8px 8px 15px #b0b0b0, -8px -8px 15px #ffffff;
}
.dark .shadow-xl-dark {
box-shadow: 8px 8px 15px #444444, -8px -8px 15px #333333;
}
</style>Componentes relacionados
Componente Columnas
Un componente de columnas diseñado con el estilo Glassmorphism, colores vibrantes y un diseño simple, adecuado para un tablero.
Componente Columnas
Un componente de columnas responsivo diseñado con los principios de Material Design, que utiliza Tailwind CSS para el estilo, la compatibilidad con temas oscuros y las animaciones receptivas.
Componente Columnas
Un componente de columnas responsivo diseñado en un estilo brutalista con tonos tierra, adaptado para el comercio electrónico, con complejidad media y soporte para temas oscuros.