Componente Layout griglia
Un componente minimalista per il layout della griglia caratterizzato da un design semplice e pulito con effetti reattivi e supporto per il tema scuro. Utilizza immagini segnaposto e avatar da picsum.photos e randomuser.me.
Codice HTML
<div class="container mx-auto p-4">
<h2 class="text-center text-2xl font-bold mb-4">Minimalist Grid Layout</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200/150" alt="Placeholder Image" class="rounded mb-2">
<h3 class="text-lg font-semibold">Card Title 1</h3>
<p class="text-gray-700 dark:text-gray-300">This is a description of the card content. It is concise and informative.</p>
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mt-2">
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200/151" alt="Placeholder Image" class="rounded mb-2">
<h3 class="text-lg font-semibold">Card Title 2</h3>
<p class="text-gray-700 dark:text-gray-300">This is a description of the card content. It is concise and informative.</p>
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mt-2">
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200/152" alt="Placeholder Image" class="rounded mb-2">
<h3 class="text-lg font-semibold">Card Title 3</h3>
<p class="text-gray-700 dark:text-gray-300">This is a description of the card content. It is concise and informative.</p>
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mt-2">
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200/153" alt="Placeholder Image" class="rounded mb-2">
<h3 class="text-lg font-semibold">Card Title 4</h3>
<p class="text-gray-700 dark:text-gray-300">This is a description of the card content. It is concise and informative.</p>
<img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar" class="w-10 h-10 rounded-full mt-2">
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200/154" alt="Placeholder Image" class="rounded mb-2">
<h3 class="text-lg font-semibold">Card Title 5</h3>
<p class="text-gray-700 dark:text-gray-300">This is a description of the card content. It is concise and informative.</p>
<img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Avatar" class="w-10 h-10 rounded-full mt-2">
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200/155" alt="Placeholder Image" class="rounded mb-2">
<h3 class="text-lg font-semibold">Card Title 6</h3>
<p class="text-gray-700 dark:text-gray-300">This is a description of the card content. It is concise and informative.</p>
<img src="https://randomuser.me/api/portraits/women/6.jpg" alt="Avatar" class="w-10 h-10 rounded-full mt-2">
</div>
</div>
</div>
<style>
/* Dark mode styles */
@media (prefers-color-scheme: dark) {
.bg-white { background-color: #1a202c; }
.text-gray-700 { color: #edf2f7; }
}
</style>Componenti correlati
Componente Layout griglia
Un componente di layout a griglia reattivo per le interfacce dei social media progettato con uno stile scheumorfico, con colori triadici, più elementi interattivi e supporto per temi scuri.
Componente Layout griglia 7
Un componente di layout a griglia reattivo progettato in stile Brutalismo con Tailwind CSS, con supporto per temi scuri e immagini segnaposto casuali.
Layout minimalista a griglia blu oceano
Un componente di layout a griglia minimalista e reattivo per i marchi di moda/bellezza, con toni blu oceano e supporto per la modalità scura.