Componenti Colonne Colonne Componente 49

Colonne Componente 49

Un componente Colonne reattivo con un design scheumorfico che imita gli elementi del mondo reale, con supporto per il tema scuro e utilizzo di Tailwind CSS.

Anteprima

Codice HTML

<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">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700">
            <div class="p-4">
                <img src="https://picsum.photos/300/200?random=1" alt="Column Image" class="w-full h-32 object-cover rounded-md shadow-md mb-4">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Column One</h2>
                <p class="text-gray-700 dark:text-gray-300">This is a sample text for the first column. It describes the content inside.</p>
            </div>
            <div class="p-4 border-t border-gray-200 dark:border-gray-700">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full inline-block">
                <span class="text-sm text-gray-600 dark:text-gray-400">Author Name</span>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700">
            <div class="p-4">
                <img src="https://picsum.photos/300/200?random=2" alt="Column Image" class="w-full h-32 object-cover rounded-md shadow-md mb-4">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Column Two</h2>
                <p class="text-gray-700 dark:text-gray-300">This is a sample text for the second column. It describes the content inside.</p>
            </div>
            <div class="p-4 border-t border-gray-200 dark:border-gray-700">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full inline-block">
                <span class="text-sm text-gray-600 dark:text-gray-400">Author Name</span>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700">
            <div class="p-4">
                <img src="https://picsum.photos/300/200?random=3" alt="Column Image" class="w-full h-32 object-cover rounded-md shadow-md mb-4">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Column Three</h2>
                <p class="text-gray-700 dark:text-gray-300">This is a sample text for the third column. It describes the content inside.</p>
            </div>
            <div class="p-4 border-t border-gray-200 dark:border-gray-700">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full inline-block">
                <span class="text-sm text-gray-600 dark:text-gray-400">Author Name</span>
            </div>
        </div>
    </div>
</div>

Componenti correlati

Componente per colonne di produzione aziendale/professionale

Un componente di colonne complesso e reattivo progettato per aziende manifatturiere/industriali con un'estetica aziendale/professionale e una combinazione di colori autunnali. Include il supporto per la modalità oscura e HTML semantico.

Aperto

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.

Aperto

Brutalism_Portfolio_Columns_Component

Un componente portfolio a più colonne di ispirazione brutalista con colori tenui, con caratteri grandi, bordi ad alto contrasto e layout asimmetrici. Include il supporto per la modalità oscura e mostra progetti con titoli, descrizioni e immagini.

Aperto