Colonne

Componente Colonne Brutaliste

Un componente di colonne complesso in stile brutalista, con una combinazione di colori monocromatica, adatto per il consumo di blog o contenuti. Il design presenta un contrasto elevato, layout insoliti e supporta la modalità scura.

Apri anteprima

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

Un componente Columns reattivo progettato in stile brutalista con toni della terra, su misura per l'e-commerce, con complessità media e supporto per temi scuri.

Apri anteprima

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

Un componente di colonne minimalista con una combinazione di colori in scala di grigi progettato per le interfacce di social networking. È dotato di un layout reattivo con supporto per il tema scuro.

Apri anteprima

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

Componente Colonne reattive con stile Glassmorphism, combinazione di colori triadica, livello di complessità semplice per scopi aziendali/aziendali, include il supporto per la modalità oscura.

Apri anteprima

                 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 dei componenti delle colonne

Neumorfismo dei componenti delle colonne: uno stile dell'interfaccia utente morbido che crea elementi che sembrano essere estrusi dallo sfondo utilizzando ombre sottili. Questo componente è reattivo e supporta il tema scuro. Non è necessario alcun codice JavaScript. Per la modalità scura, il supporto CSS è sufficiente.

Apri anteprima

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

Un componente Columns in stile Material Design con effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.

Apri anteprima

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

Un componente di colonne reattive con elementi di progettazione 3D e supporto per temi scuri utilizzando Tailwind CSS.

Apri anteprima

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

Un componente Columns reattivo progettato con un'estetica retrò/vintage, che supporta sia temi chiari che scuri. Presenta immagini segnaposto e avatar rispettivamente da picsum.photos e randomuser.me.

Apri anteprima

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

Un componente di colonne reattive con stile per la modalità scura utilizzando Tailwind CSS, con segnaposto per avatar e immagini.

Apri anteprima

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

Un componente Columns reattivo progettato con i principi di Material Design, che utilizza Tailwind CSS per lo stile, il supporto del tema scuro e le animazioni reattive.

Apri anteprima

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

Categorie