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
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.
Composant de mise en page de grille
Un composant de mise en page de grille réactif suivant les principes de conception matérielle, avec des effets d’ombre et la prise en charge du mode sombre, à l’aide de Tailwind CSS.
Grille de tableau de bord Neumorphism
Composant de tableau de bord de mise en page de grille de neumorphisme avec schéma de couleurs complémentaires