Composant de mise en page de grille
Un composant de mise en page de grille minimaliste avec un design simple et épuré avec des effets réactifs et la prise en charge du thème sombre. Utilise des images de substitution et des avatars de picsum.photos et randomuser.me.
HTML Code
<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>
Composants associés
ArtDecoEducationalGrid
Un composant de mise en page de grille complexe et réactif pour les plateformes éducatives, stylisé avec des motifs géométriques Art déco et de riches couleurs d’automne. Comprend la prise en charge du mode sombre et plusieurs éléments interactifs.
Travel_Booking_Grid_Layout_Component
Il s’agit d’un composant de mise en page de grille complexe et réactif pour un site Web de réservation de voyages avec un design d’entreprise/professionnel, une palette de couleurs analogue et une prise en charge du mode sombre. Comprend des cartes de destination, une entrée de recherche et une barre latérale.
Composant de mise en page de grille
Un composant de mise en page de grille réactif pour les interfaces de médias sociaux conçu avec un style skeuomorphe, avec des couleurs triadiques, plusieurs éléments interactifs et la prise en charge des thèmes sombres.