Composants Disposition de la grille Composant de mise en page de grille

Composant de mise en page de grille

Un composant de mise en page de grille réactif suivant les principes de conception matérielle, avec des effets d’ombre et la prise en charge du mode sombre, à l’aide de Tailwind CSS.

Aperçu

HTML Code

<div class="container mx-auto p-4">
    <h1 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Material Design Grid Layout</h1>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/200/300" alt="Random Image" class="w-full h-48 object-cover" />
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Card Title 1</h2>
                <p class="text-gray-600 dark:text-gray-400">This is a brief description of the content in the card.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/200/300?2" alt="Random Image" class="w-full h-48 object-cover" />
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Card Title 2</h2>
                <p class="text-gray-600 dark:text-gray-400">This is a brief description of the content in the card.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/200/300?3" alt="Random Image" class="w-full h-48 object-cover" />
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Card Title 3</h2>
                <p class="text-gray-600 dark:text-gray-400">This is a brief description of the content in the card.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/200/300?4" alt="Random Image" class="w-full h-48 object-cover" />
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Card Title 4</h2>
                <p class="text-gray-600 dark:text-gray-400">This is a brief description of the content in the card.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/200/300?5" alt="Random Image" class="w-full h-48 object-cover" />
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Card Title 5</h2>
                <p class="text-gray-600 dark:text-gray-400">This is a brief description of the content in the card.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/200/300?6" alt="Random Image" class="w-full h-48 object-cover" />
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Card Title 6</h2>
                <p class="text-gray-600 dark:text-gray-400">This is a brief description of the content in the card.</p>
            </div>
        </div>
    </div>
</div>

<!-- Tailwind CSS styles for dark mode support -->
<style>
    @media (prefers-color-scheme: dark) {
        .dark .bg-white { background-color: #1f2937; /* Gray-800 */ }
        .dark .text-gray-700 { color: #e5e7eb; /* Gray-200 */ }
        .dark .text-gray-600 { color: #d1d5db; /* Gray-400 */ }
    }
</style>

Composants associés

Composant de disposition de grille de neumorphisme

Ouvrir

Composant de mise en page de grille

Un composant de mise en page de grille réactif pour les interfaces de médias sociaux conçu avec un style skeuomorphe, avec des couleurs triadiques, plusieurs éléments interactifs et la prise en charge des thèmes sombres.

Ouvrir

Course_Grid_Layout_Component

Un composant de mise en page de grille réactif et visuellement attrayant pour les plates-formes éducatives, avec des cartes de cours avec des tons chauds de coucher de soleil, des ombres Material Design et la prise en charge du mode sombre.

Ouvrir