Composants Disposition de la grille Composant de disposition de grille 29

Composant de disposition de grille 29

Un composant de mise en page de grille réactif conçu dans un style brutaliste avec un contraste élevé et des mises en page inhabituelles, prenant en charge le mode sombre avec Tailwind CSS.

Aperçu

HTML Code

<div class="min-h-screen bg-gray-50 dark:bg-gray-900 p-8">
  <h1 class="text-4xl font-bold text-center text-gray-800 dark:text-gray-100">Brutalist Grid Layout</h1>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-10">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
      <img src="https://picsum.photos/200/300?random=1" alt="Placeholder Image" class="object-cover h-48 rounded-lg">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-100 mt-2">Card Title 1</h2>
      <p class="text-gray-600 dark:text-gray-300">This is a description for the card. It features a bold layout and striking contrast.</p>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
      <img src="https://picsum.photos/200/300?random=2" alt="Placeholder Image" class="object-cover h-48 rounded-lg">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-100 mt-2">Card Title 2</h2>
      <p class="text-gray-600 dark:text-gray-300">This is a description for the card. It features a bold layout and striking contrast.</p>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
      <img src="https://picsum.photos/200/300?random=3" alt="Placeholder Image" class="object-cover h-48 rounded-lg">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-100 mt-2">Card Title 3</h2>
      <p class="text-gray-600 dark:text-gray-300">This is a description for the card. It features a bold layout and striking contrast.</p>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
      <img src="https://picsum.photos/200/300?random=4" alt="Placeholder Image" class="object-cover h-48 rounded-lg">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-100 mt-2">Card Title 4</h2>
      <p class="text-gray-600 dark:text-gray-300">This is a description for the card. It features a bold layout and striking contrast.</p>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
      <img src="https://picsum.photos/200/300?random=5" alt="Placeholder Image" class="object-cover h-48 rounded-lg">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-100 mt-2">Card Title 5</h2>
      <p class="text-gray-600 dark:text-gray-300">This is a description for the card. It features a bold layout and striking contrast.</p>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
      <img src="https://picsum.photos/200/300?random=6" alt="Placeholder Image" class="object-cover h-48 rounded-lg">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-100 mt-2">Card Title 6</h2>
      <p class="text-gray-600 dark:text-gray-300">This is a description for the card. It features a bold layout and striking contrast.</p>
    </div>
  </div>
</div>

Composants associés

Disposition de la grille de conception matérielle

Composant de mise en page de grille réactif avec le style Material Design, y compris les effets d’ombre et la prise en charge du mode sombre.

Ouvrir

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

Ouvrir

Skeuomorphism Disposition en grille vibrante

Composant de mise en page de grille réactif avec prise en charge du mode sombre, conception Skeuomorphism, Couleurs vives, Complexité modérée, adapté aux portefeuilles.

Ouvrir