Composants Colonnes Colonnes Composant 49

Colonnes Composant 49

Un composant de colonnes réactif avec un design skeuomorphe imitant les éléments du monde réel, avec la prise en charge du thème sombre et utilisant Tailwind CSS.

Aperçu

HTML Code

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

Composants associés

Composant Colonnes

Une mise en page simple à trois colonnes pour un tableau de bord, avec des cartes de type 3D avec des couleurs vives et la prise en charge du mode sombre.

Ouvrir

Retro_Industrial_Columns_Component

Un composant de colonnes complexe, vibrant, de style rétro/vintage pour les entreprises manufacturières/industrielles, présentant une esthétique des années 80/90 avec prise en charge du mode sombre et une réactivité totale.

Ouvrir

Composant Colonnes

Composant Columns réactif conçu pour les blogs ou la consommation de contenu. Il présente un design plat minimaliste avec une palette de couleurs analogue et un support de thème sombre.

Ouvrir