Layout della griglia di Material Design
Un componente di layout a griglia reattivo con stile Material Design, inclusi effetti di ombra e supporto per la modalità scura.
Codice HTML
<div class="container mx-auto p-4">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum1/400/300" alt="Placeholder Image 1">
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 1</h3>
<p class="text-gray-600 dark:text-gray-300 mt-2">This is a description for card 1. It provides details about the content.</p>
</div>
</div>
<!-- Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum2/400/300" alt="Placeholder Image 2">
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 2</h3>
<p class="text-gray-600 dark:text-gray-300 mt-2">This is a description for card 2. It provides details about the content.</p>
</div>
</div>
<!-- Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum3/400/300" alt="Placeholder Image 3">
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 3</h3>
<p class="text-gray-600 dark:text-gray-300 mt-2">This is a description for card 3. It provides details about the content.</p>
</div>
</div>
<!-- Card 4 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum4/400/300" alt="Placeholder Image 4">
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 4</h3>
<p class="text-gray-600 dark:text-gray-300 mt-2">This is a description for card 4. It provides details about the content.</p>
</div>
</div>
<!-- Card 5 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum5/400/300" alt="Placeholder Image 5">
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 5</h3>
<p class="text-gray-600 dark:text-gray-300 mt-2">This is a description for card 5. It provides details about the content.</p>
</div>
</div>
<!-- Card 6 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum6/400/300" alt="Placeholder Image 6">
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 6</h3>
<p class="text-gray-600 dark:text-gray-300 mt-2">This is a description for card 6. It provides details about the content.</p>
</div>
</div>
</div>
</div>Componenti correlati
Componente Layout griglia intrattenimento
Un layout a griglia pulito e minimalista ispirato alla tipografia svizzera/internazionale per l'intrattenimento e le piattaforme multimediali. Presenta una combinazione di colori triadica, reattività e supporto per la modalità scura.
Layout di prenotazione a griglia sfumata
Un componente di layout a griglia complesso e reattivo per i sistemi di prenotazione, con sfumature di colore triadiche, transizioni fluide e supporto per la modalità scura. Progettato con più elementi interattivi.
Watercolor_Artistic_Grid_Layout_Consulting
Un componente di layout a griglia semplice e reattivo per consulenze/servizi, caratterizzato da un morbido acquerello/design artistico con neutri freddi e supporto per la modalità scura.