Composant Colonnes

Composant Colonnes réactives avec mode sombre

Aperçu

HTML Code

<div class="dark:bg-gray-900 p-8">
  <div class="container mx-auto">
    <div class="md:flex md:space-x-6">
      <div class="md:w-1/3">
        <div class="rounded-lg shadow-md p-6 dark:bg-gray-800">
          <h3 class="text-xl font-semibold mb-4 dark:text-white">Column One</h3>
          <p class="dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
      <div class="md:w-1/3">
        <div class="rounded-lg shadow-md p-6 dark:bg-gray-800">
          <h3 class="text-xl font-semibold mb-4 dark:text-white">Column Two</h3>
          <p class="dark:text-gray-300">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>
      <div class="md:w-1/3">
        <div class="rounded-lg shadow-md p-6 dark:bg-gray-800">
          <h3 class="text-xl font-semibold mb-4 dark:text-white">Column Three</h3>
          <p class="dark:text-gray-300">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Composants associés

Composant Colonnes

Un composant de colonnes réactives conçu avec une esthétique rétro/vintage, prenant en charge les thèmes clairs et sombres. Comprend des images fictives et des avatars de picsum.photos et randomuser.me respectivement.

Ouvrir

Composante des colonnes brutalistes

Un composant complexe de colonnes au design brutaliste, avec une palette de couleurs monochromatiques, adapté à la consommation de blogs ou de contenu. Le design présente un contraste élevé, des mises en page inhabituelles et prend en charge le mode sombre.

Ouvrir

Composant Colonnes

Colonnes en niveaux de gris réactives de style 3D pour une page de portfolio, avec prise en charge du mode sombre.

Ouvrir