Composant de mise en page de grille
Un composant de mise en page de grille réactif avec un design rétro/vintage, avec une esthétique nostalgique des années 80/90. Le composant comprend des images d’espace réservé et des avatars avec prise en charge du mode sombre.
HTML Code
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-6 bg-gray-100 dark:bg-gray-800">
<div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg overflow-hidden">
<img src="https://picsum.photos/300/200?random=1" alt="Placeholder Image 1" class="w-full h-36 object-cover">
<div class="p-4">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Retro 1</h2>
<p class="text-gray-600 dark:text-gray-400">This is a retro-themed description for the first item in the grid.</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-sm text-gray-700 dark:text-gray-300">User 1</span>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg overflow-hidden">
<img src="https://picsum.photos/300/200?random=2" alt="Placeholder Image 2" class="w-full h-36 object-cover">
<div class="p-4">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Retro 2</h2>
<p class="text-gray-600 dark:text-gray-400">This is a retro-themed description for the second item in the grid.</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-sm text-gray-700 dark:text-gray-300">User 2</span>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg overflow-hidden">
<img src="https://picsum.photos/300/200?random=3" alt="Placeholder Image 3" class="w-full h-36 object-cover">
<div class="p-4">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Retro 3</h2>
<p class="text-gray-600 dark:text-gray-400">This is a retro-themed description for the third item in the grid.</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-sm text-gray-700 dark:text-gray-300">User 3</span>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg overflow-hidden">
<img src="https://picsum.photos/300/200?random=4" alt="Placeholder Image 4" class="w-full h-36 object-cover">
<div class="p-4">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Retro 4</h2>
<p class="text-gray-600 dark:text-gray-400">This is a retro-themed description for the fourth item in the grid.</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-sm text-gray-700 dark:text-gray-300">User 4</span>
</div>
</div>
</div>
</div>Composants associés
Composant de mise en page de grille pastel skeuomorphe
Mise en page de grille pastel skeuomorphe pour blog/contenu, simple avec mode sombre
Composant de mise en page de grille
Un composant de mise en page de grille minimaliste pour le commerce électronique avec une palette de couleurs triadique et la prise en charge du mode sombre, conçu pour les expériences d’achat en ligne.
Composant de mise en page de grille 3D pour portfolio
Un composant de mise en page de grille complexe, réactif et de style 3D pour les portfolios utilisant des couleurs complémentaires, avec prise en charge du mode sombre et des images de picsum.photos.