Componente Columnas
Un componente de columnas diseñado con el estilo Glassmorphism, colores vibrantes y un diseño simple, adecuado para un tablero.
Código HTML
<div class="flex flex-col md:flex-row md:space-x-4 p-6 bg-gray-900 dark:bg-gray-800 rounded-lg backdrop-blur-lg border border-transparent border-gray-600">
<div class="flex-1 p-4 bg-white bg-opacity-20 rounded-lg shadow-md dark:bg-gray-700">
<h2 class="text-xl font-bold text-white mb-2">Column 1</h2>
<img src="https://picsum.photos/200/100" alt="Image 1" class="w-full rounded-lg mb-2" />
<p class="text-white">This is a description for the first column. Use this space to display key metrics or important information.</p>
</div>
<div class="flex-1 p-4 bg-white bg-opacity-20 rounded-lg shadow-md dark:bg-gray-700">
<h2 class="text-xl font-bold text-white mb-2">Column 2</h2>
<img src="https://picsum.photos/200/100" alt="Image 2" class="w-full rounded-lg mb-2" />
<p class="text-white">This is a description for the second column. Provide insights, visualizations, or controls related to the data here.</p>
</div>
<div class="flex-1 p-4 bg-white bg-opacity-20 rounded-lg shadow-md dark:bg-gray-700">
<h2 class="text-xl font-bold text-white mb-2">Column 3</h2>
<img src="https://picsum.photos/200/100" alt="Image 3" class="w-full rounded-lg mb-2" />
<p class="text-white">This is a description for the third column. Summary or additional data visuals can fit nicely in this space.</p>
</div>
</div>Componentes relacionados
Componente Columnas
Componente de columnas responsivas con estilo Glassmorphism, combinación de colores triádica, nivel de complejidad simple para fines comerciales / corporativos, incluye soporte de modo oscuro.
Componente Columnas Brutalistas
Un componente de columnas complejas con un diseño brutalista, con un esquema de color monocromático, adecuado para el blog o el consumo de contenido. El diseño presenta alto contraste, diseños inusuales y admite el modo oscuro.