Columnas

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.

Abrir vista previa

                <div class="container mx-auto p-6">
    <h1 class="text-4xl font-bold mb-4 text-gray-900 dark:text-gray-100">Brutalist Columns Component</h1>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-lg">
            <img src="https://picsum.photos/400/200" alt="Random Image" class="rounded-t-lg mb-4">
            <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Column Title 1</h2>
            <p class="text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, ratione.</p>
            <div class="flex items-center mt-4">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="text-gray-900 dark:text-gray-100">Author Name</span>
            </div>
        </div>
        <div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-lg">
            <img src="https://picsum.photos/400/201" alt="Random Image" class="rounded-t-lg mb-4">
            <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Column Title 2</h2>
            <p class="text-gray-700 dark:text-gray-300">Animi, cupiditate! Doloremque aperiam sit perspiciatis quam.</p>
            <div class="flex items-center mt-4">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="text-gray-900 dark:text-gray-100">Author Name</span>
            </div>
        </div>
        <div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-lg">
            <img src="https://picsum.photos/400/202" alt="Random Image" class="rounded-t-lg mb-4">
            <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Column Title 3</h2>
            <p class="text-gray-700 dark:text-gray-300">Qui facere, necessitatibus quos aut eius optio deserunt.</p>
            <div class="flex items-center mt-4">
                <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="text-gray-900 dark:text-gray-100">Author Name</span>
            </div>
        </div>
        <div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-lg">
            <img src="https://picsum.photos/400/203" alt="Random Image" class="rounded-t-lg mb-4">
            <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Column Title 4</h2>
            <p class="text-gray-700 dark:text-gray-300">Aliquam explicabo, at velit? Voluptate, facere voluptatem?</p>
            <div class="flex items-center mt-4">
                <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="text-gray-900 dark:text-gray-100">Author Name</span>
            </div>
        </div>
        <div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-lg">
            <img src="https://picsum.photos/400/204" alt="Random Image" class="rounded-t-lg mb-4">
            <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Column Title 5</h2>
            <p class="text-gray-700 dark:text-gray-300">Adipisci veniam, nobis porro repellat quo beatae impedit?</p>
            <div class="flex items-center mt-4">
                <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="text-gray-900 dark:text-gray-100">Author Name</span>
            </div>
        </div>
        <div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-lg">
            <img src="https://picsum.photos/400/205" alt="Random Image" class="rounded-t-lg mb-4">
            <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Column Title 6</h2>
            <p class="text-gray-700 dark:text-gray-300">Perferendis est provident, voluptatum dolor cumque atque.</p>
            <div class="flex items-center mt-4">
                <img src="https://randomuser.me/api/portraits/men/6.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="text-gray-900 dark:text-gray-100">Author Name</span>
            </div>
        </div>
    </div>
</div>

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.

Abrir vista previa

                <div class="container mx-auto p-6">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-brown-200 dark:bg-brown-700 p-4 rounded-lg shadow-md">
            <img src="https://picsum.photos/200/300?random=1" alt="Product 1" class="w-full h-48 object-cover rounded-t-lg">
            <h2 class="text-lg font-bold mt-2">Product Title 1</h2>
            <p class="text-gray-800 dark:text-gray-300">Description for product 1. A brief overview of the product features and benefits.</p>
            <div class="flex justify-between items-center mt-4">
                <span class="font-semibold text-xl text-brown-900 dark:text-brown-100">$19.99</span>
                <button class="bg-brown-800 dark:bg-brown-600 text-white py-1 px-3 rounded hover:bg-brown-900 dark:hover:bg-brown-500">Add to Cart</button>
            </div>
        </div>
        <div class="bg-brown-200 dark:bg-brown-700 p-4 rounded-lg shadow-md">
            <img src="https://picsum.photos/200/300?random=2" alt="Product 2" class="w-full h-48 object-cover rounded-t-lg">
            <h2 class="text-lg font-bold mt-2">Product Title 2</h2>
            <p class="text-gray-800 dark:text-gray-300">Description for product 2. A brief overview of the product features and benefits.</p>
            <div class="flex justify-between items-center mt-4">
                <span class="font-semibold text-xl text-brown-900 dark:text-brown-100">$29.99</span>
                <button class="bg-brown-800 dark:bg-brown-600 text-white py-1 px-3 rounded hover:bg-brown-900 dark:hover:bg-brown-500">Add to Cart</button>
            </div>
        </div>
        <div class="bg-brown-200 dark:bg-brown-700 p-4 rounded-lg shadow-md">
            <img src="https://picsum.photos/200/300?random=3" alt="Product 3" class="w-full h-48 object-cover rounded-t-lg">
            <h2 class="text-lg font-bold mt-2">Product Title 3</h2>
            <p class="text-gray-800 dark:text-gray-300">Description for product 3. A brief overview of the product features and benefits.</p>
            <div class="flex justify-between items-center mt-4">
                <span class="font-semibold text-xl text-brown-900 dark:text-brown-100">$39.99</span>
                <button class="bg-brown-800 dark:bg-brown-600 text-white py-1 px-3 rounded hover:bg-brown-900 dark:hover:bg-brown-500">Add to Cart</button>
            </div>
        </div>
        <div class="bg-brown-200 dark:bg-brown-700 p-4 rounded-lg shadow-md">
            <img src="https://picsum.photos/200/300?random=4" alt="Product 4" class="w-full h-48 object-cover rounded-t-lg">
            <h2 class="text-lg font-bold mt-2">Product Title 4</h2>
            <p class="text-gray-800 dark:text-gray-300">Description for product 4. A brief overview of the product features and benefits.</p>
            <div class="flex justify-between items-center mt-4">
                <span class="font-semibold text-xl text-brown-900 dark:text-brown-100">$49.99</span>
                <button class="bg-brown-800 dark:bg-brown-600 text-white py-1 px-3 rounded hover:bg-brown-900 dark:hover:bg-brown-500">Add to Cart</button>
            </div>
        </div>
        <div class="bg-brown-200 dark:bg-brown-700 p-4 rounded-lg shadow-md">
            <img src="https://picsum.photos/200/300?random=5" alt="Product 5" class="w-full h-48 object-cover rounded-t-lg">
            <h2 class="text-lg font-bold mt-2">Product Title 5</h2>
            <p class="text-gray-800 dark:text-gray-300">Description for product 5. A brief overview of the product features and benefits.</p>
            <div class="flex justify-between items-center mt-4">
                <span class="font-semibold text-xl text-brown-900 dark:text-brown-100">$59.99</span>
                <button class="bg-brown-800 dark:bg-brown-600 text-white py-1 px-3 rounded hover:bg-brown-900 dark:hover:bg-brown-500">Add to Cart</button>
            </div>
        </div>
        <div class="bg-brown-200 dark:bg-brown-700 p-4 rounded-lg shadow-md">
            <img src="https://picsum.photos/200/300?random=6" alt="Product 6" class="w-full h-48 object-cover rounded-t-lg">
            <h2 class="text-lg font-bold mt-2">Product Title 6</h2>
            <p class="text-gray-800 dark:text-gray-300">Description for product 6. A brief overview of the product features and benefits.</p>
            <div class="flex justify-between items-center mt-4">
                <span class="font-semibold text-xl text-brown-900 dark:text-brown-100">$69.99</span>
                <button class="bg-brown-800 dark:bg-brown-600 text-white py-1 px-3 rounded hover:bg-brown-900 dark:hover:bg-brown-500">Add to Cart</button>
            </div>
        </div>
    </div>
</div>

Componente Columnas

Un componente de columnas minimalista con un esquema de color en escala de grises diseñado para interfaces de redes sociales. Cuenta con un diseño responsivo con soporte para temas oscuros.

Abrir vista previa

                <div class="container mx-auto p-4 md:p-8">
    <h1 class="text-2xl font-semibold text-center text-gray-800 dark:text-gray-200">User Profiles</h1>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6">
        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
            <img class="rounded-full w-24 h-24 mx-auto" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 text-center mt-2">John Doe</h2>
            <p class="text-gray-600 dark:text-gray-400 text-center">@johndoe</p>
            <p class="text-gray-500 dark:text-gray-300 text-center mt-2">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            <img class="mt-4 rounded-lg" src="https://picsum.photos/300/200?random=1" alt="Random Image">
        </div>
        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
            <img class="rounded-full w-24 h-24 mx-auto" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 text-center mt-2">Jane Smith</h2>
            <p class="text-gray-600 dark:text-gray-400 text-center">@janesmith</p>
            <p class="text-gray-500 dark:text-gray-300 text-center mt-2">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            <img class="mt-4 rounded-lg" src="https://picsum.photos/300/200?random=2" alt="Random Image">
        </div>
        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
            <img class="rounded-full w-24 h-24 mx-auto" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 text-center mt-2">Michael Johnson</h2>
            <p class="text-gray-600 dark:text-gray-400 text-center">@michaeljohnson</p>
            <p class="text-gray-500 dark:text-gray-300 text-center mt-2">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            <img class="mt-4 rounded-lg" src="https://picsum.photos/300/200?random=3" alt="Random Image">
        </div>
    </div>
</div>

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.

Abrir vista previa

                 responsibly written html code with tailwind classes which apply Glassmorphism style, Triadic color scheme, Simple complexity level, includes dark mode support, is responsive, and uses picsum.photos or randomuser.me if needed.

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.

Abrir vista previa

                <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>

Componente Columnas

Un componente de columnas de estilo Material Design con efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS.

Abrir vista previa

                <div class="container mx-auto px-4 py-8">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- Column 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Column 1</h2>
      <p class="text-gray-600 dark:text-gray-300">This is the content for column 1. It uses Material Design principles for styling and responsiveness.</p>
    </div>

    <!-- Column 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Column 2</h2>
      <p class="text-gray-600 dark:text-gray-300">This is the content for column 2. The columns are responsive, adapting to different screen sizes.</p>
    </div>

    <!-- Column 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Column 3</h2>
      <p class="text-gray-600 dark:text-gray-300">This is the content for column 3. Dark mode is supported, changing the background and text colors.</p>
    </div>
  </div>
</div>

Componente Columnas

Un componente de columnas responsivo con elementos de diseño 3D y soporte de temas oscuros mediante Tailwind CSS.

Abrir vista previa

                <div class="container mx-auto p-4">
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out">
      <img src="https://picsum.photos/300/200?random=1" alt="Image 1" class="w-full h-48 object-cover">
      <div class="p-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Column Title 1</h2>
        <p class="text-gray-600 dark:text-gray-400">This is a description for column one. It includes engaging content about the service or feature.</p>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out">
      <img src="https://picsum.photos/300/200?random=2" alt="Image 2" class="w-full h-48 object-cover">
      <div class="p-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Column Title 2</h2>
        <p class="text-gray-600 dark:text-gray-400">This is a description for column two. Showcase your content effectively with appealing design.</p>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out">
      <img src="https://picsum.photos/300/200?random=3" alt="Image 3" class="w-full h-48 object-cover">
      <div class="p-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Column Title 3</h2>
        <p class="text-gray-600 dark:text-gray-400">This is a description for column three. Engage your users with powerful imagery and text.</p>
      </div>
    </div>
  </div>
</div>

Componente Columnas

Un componente de columnas receptivo diseñado con una estética retro / vintage, que admite temas claros y oscuros. Cuenta con imágenes de marcador de posición y avatares de picsum.photos y randomuser.me respectivamente.

Abrir vista previa

                <div class="container mx-auto px-4 py-8">
    <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-gray-200 mb-8">Retro Columns</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=1" alt="Random placeholder image">
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Column Title 1</h3>
                <p class="text-gray-600 dark:text-gray-400 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel risus vitae nisl euismod aliquam.</p>
                <div class="flex items-center mt-4">
                    <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
                    <p class="ml-2 text-gray-800 dark:text-gray-200">John Doe</p>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=2" alt="Random placeholder image">
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Column Title 2</h3>
                <p class="text-gray-600 dark:text-gray-400 mt-2">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                <div class="flex items-center mt-4">
                    <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
                    <p class="ml-2 text-gray-800 dark:text-gray-200">Jane Doe</p>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=3" alt="Random placeholder image">
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Column Title 3</h3>
                <p class="text-gray-600 dark:text-gray-400 mt-2">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <div class="flex items-center mt-4">
                    <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
                    <p class="ml-2 text-gray-800 dark:text-gray-200">John Smith</p>
                </div>
            </div>
        </div>
    </div>
</div>

Componente Columnas

Un componente de columnas responsivo diseñado para el modo oscuro con Tailwind CSS, con marcadores de posición de avatar e imagen.

Abrir vista previa

                <div class="bg-gray-900 text-white p-6">
    <h2 class="text-2xl font-bold mb-4">Columns Component</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <!-- Column 1 -->
        <div class="bg-gray-800 p-4 rounded shadow-lg">
            <img src="https://picsum.photos/200/100" alt="Placeholder Image" class="rounded-lg mb-4">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="font-semibold">User One</span>
            </div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum.</p>
        </div>
        <!-- Column 2 -->
        <div class="bg-gray-800 p-4 rounded shadow-lg">
            <img src="https://picsum.photos/200/100?random=1" alt="Placeholder Image" class="rounded-lg mb-4">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/men/11.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="font-semibold">User Two</span>
            </div>
            <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
        </div>
        <!-- Column 3 -->
        <div class="bg-gray-800 p-4 rounded shadow-lg">
            <img src="https://picsum.photos/200/100?random=2" alt="Placeholder Image" class="rounded-lg mb-4">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/men/12.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="font-semibold">User Three</span>
            </div>
            <p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur.</p>
        </div>
    </div>
</div>

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.

Abrir vista previa

                <div class="container mx-auto px-4">
    <h2 class="text-2xl font-bold my-6 text-gray-800 dark:text-gray-200">Columns Component</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/200/150?random=1" alt="Placeholder" class="w-full h-48 rounded-md object-cover mb-4">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Column 1</h3>
            <p class="text-gray-600 dark:text-gray-400">This is a description for the first column. It can contain any content.</p>
        </div>
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/200/150?random=2" alt="Placeholder" class="w-full h-48 rounded-md object-cover mb-4">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Column 2</h3>
            <p class="text-gray-600 dark:text-gray-400">This is a description for the second column. It can contain any content.</p>
        </div>
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/200/150?random=3" alt="Placeholder" class="w-full h-48 rounded-md object-cover mb-4">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Column 3</h3>
            <p class="text-gray-600 dark:text-gray-400">This is a description for the third column. It can contain any content.</p>
        </div>
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/200/150?random=4" alt="Placeholder" class="w-full h-48 rounded-md object-cover mb-4">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Column 4</h3>
            <p class="text-gray-600 dark:text-gray-400">This is a description for the fourth column. It can contain any content.</p>
        </div>
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/200/150?random=5" alt="Placeholder" class="w-full h-48 rounded-md object-cover mb-4">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Column 5</h3>
            <p class="text-gray-600 dark:text-gray-400">This is a description for the fifth column. It can contain any content.</p>
        </div>
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/200/150?random=6" alt="Placeholder" class="w-full h-48 rounded-md object-cover mb-4">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Column 6</h3>
            <p class="text-gray-600 dark:text-gray-400">This is a description for the sixth column. It can contain any content.</p>
        </div>
    </div>
</div>

Categorías