Componente Columnas
Un componente de columnas responsivo diseñado con Glassmorphism, que utiliza un esquema de color triádico para un sitio web empresarial/corporativo. Cuenta con elementos translúcidos similares al vidrio esmerilado, efectos de desenfoque y es adecuado para el modo oscuro.
Código HTML
<div class="flex flex-col lg:flex-row justify-between p-6 bg-white dark:bg-gray-800 bg-opacity-70 backdrop-blur-md rounded-lg shadow-lg space-y-6 lg:space-y-0 lg:space-x-6">
<div class="flex-1 bg-white bg-opacity-30 rounded-lg backdrop-blur-md shadow-md p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Column 1</h2>
<p class="text-gray-600 dark:text-gray-400">This is a description for the first column. It can contain any information relevant to your business.</p>
<img src="https://picsum.photos/200/150?random=1" alt="Random Image" class="mt-4 rounded-lg shadow-md" />
</div>
<div class="flex-1 bg-white bg-opacity-30 rounded-lg backdrop-blur-md shadow-md p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Column 2</h2>
<p class="text-gray-600 dark:text-gray-400">Description for the second column goes here. You can elaborate on services or features.</p>
<img src="https://picsum.photos/200/150?random=2" alt="Random Image" class="mt-4 rounded-lg shadow-md" />
</div>
<div class="flex-1 bg-white bg-opacity-30 rounded-lg backdrop-blur-md shadow-md p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Column 3</h2>
<p class="text-gray-600 dark:text-gray-400">Details for the third column. Include any additional content as needed.</p>
<img src="https://picsum.photos/200/150?random=3" alt="Random Image" class="mt-4 rounded-lg shadow-md" />
</div>
</div>Componentes relacionados
Componente Columnas
Columnas responsivas en escala de grises de estilo 3D para una página de portafolio, con soporte para modo oscuro.
Componente Columnas
Un componente de columnas responsivo diseñado para la presentación de carteras con soporte para modo oscuro, utilizando un esquema de color en escala de grises y Tailwind CSS.
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.