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

Un composant de colonnes réactives conçu selon les principes de Material Design, utilisant Tailwind CSS pour le style, la prise en charge des thèmes sombres et les animations réactives.

Ouvrir

Composant Colonnes de neumorphisme

Ouvrir

Composant Colonnes

Un composant de colonnes réactives avec de petites animations attrayantes, adapté au e-commerce avec un thème sombre.

Ouvrir