Composants Disposition de la grille Skeuomorphism Disposition en grille vibrante

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.

Aperçu

HTML Code

<!-- Grid Layout Container -->
<div class="container mx-auto p-4 dark:bg-gray-900">

  <!-- Grid -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

    <!-- Grid Item 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 transform transition duration-500 hover:scale-105 border border-gray-200 dark:border-gray-700">
      <img class="w-full h-48 object-cover rounded-md mb-4" src="https://picsum.photos/seed/picsum/400/300" alt="Project Image">
      <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Project Title 1</h3>
      <p class="text-gray-600 dark:text-gray-300 mb-4">A brief description of project 1 showcasing skills and technologies used.</p>
      <div class="flex justify-between items-center">
        <a href="#" class="text-blue-500 dark:text-blue-400 hover:underline font-semibold">View Project</a>
        <img class="w-8 h-8 rounded-full ring-2 ring-blue-400" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar">
      </div>
    </div>

    <!-- Grid Item 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 transform transition duration-500 hover:scale-105 border border-gray-200 dark:border-gray-700">
      <img class="w-full h-48 object-cover rounded-md mb-4" src="https://picsum.photos/seed/picsum/400/300" alt="Project Image">
      <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Project Title 2</h3>
      <p class="text-gray-600 dark:text-gray-300 mb-4">A brief description of project 2 showcasing skills and technologies used.</p>
      <div class="flex justify-between items-center">
        <a href="#" class="text-blue-500 dark:text-blue-400 hover:underline font-semibold">View Project</a>
        <img class="w-8 h-8 rounded-full ring-2 ring-purple-400" src="https://randomuser.me/api/portraits/women/76.jpg" alt="Avatar">
      </div>
    </div>

    <!-- Grid Item 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 transform transition duration-500 hover:scale-105 border border-gray-200 dark:border-gray-700">
      <img class="w-full h-48 object-cover rounded-md mb-4" src="https://picsum.photos/seed/picsum/400/300" alt="Project Image">
      <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Project Title 3</h3>
      <p class="text-gray-600 dark:text-gray-300 mb-4">A brief description of project 3 showcasing skills and technologies used.</p>
      <div class="flex justify-between items-center">
        <a href="#" class="text-blue-500 dark:text-blue-400 hover:underline font-semibold">View Project</a>
        <img class="w-8 h-8 rounded-full ring-2 ring-green-400" src="https://randomuser.me/api/portraits/men/77.jpg" alt="Avatar">
      </div>
    </div>
    
    <!-- Add more grid items as needed -->

  </div>

</div>

Composants associés

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

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

Ouvrir

Composant 7 de la disposition de la grille

Un composant de mise en page de grille réactif conçu dans le style Brutalism avec Tailwind CSS, avec la prise en charge des thèmes sombres et des images de remplacement aléatoires.

Ouvrir