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
Grille agricole ludique
Un composant de mise en page de grille simple, joyeux et réactif pour l’agriculture et les sites Web agricoles, avec des neutres chauds, des éléments arrondis et la prise en charge du mode sombre.
Grille CRM Cyberpunk
Un composant de mise en page de grille réactif pour les outils CRM/Business avec une esthétique néon cyberpunk-futuriste, avec des arrière-plans sombres et des couleurs chaudes d’accent de coucher de soleil. Comprend des éléments interactifs et la prise en charge du mode sombre.
Composant de mise en page de grille cyberpunk
Un composant de mise en page de grille simple et réactif avec une esthétique cyberpunk, adapté aux sites Web d’événements ou de conférences. Présente des arrière-plans sombres, des accents de néon lumineux et une palette de couleurs triadiques. Inclut la prise en charge du mode sombre.