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 de soins de santé vibrante inspirée du papier
Un composant de mise en page de grille simple, inspiré du papier/de l’impression avec des couleurs vives, conçu pour les applications médicales/de santé. Il est entièrement réactif, inclut la prise en charge du mode sombre et utilise le HTML sémantique.
Composant de disposition de grille de skeuomorphisme
Composant de mise en page de grille Skeuomorphism avec effets réactifs et prise en charge du thème sombre.
FinancialGridWithInteractions
Un composant de mise en page de grille réactif pour les interfaces financières/bancaires, avec des couleurs à contraste élevé et des micro-interactions subtiles au survol. Prend en charge le mode sombre et est conçu pour une complexité modérée.