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 CRM Cyberpunk

Un composant de mise en page de grille réactif pour les outils CRM/Business avec une esthétique néon cyberpunk-futuriste, avec des arrière-plans sombres et des couleurs chaudes d’accent de coucher de soleil. Comprend des éléments interactifs et la prise en charge du mode sombre.

Ouvrir

Grille de soins de santé vibrante inspirée du papier

Un composant de mise en page de grille simple, inspiré du papier/de l’impression avec des couleurs vives, conçu pour les applications médicales/de santé. Il est entièrement réactif, inclut la prise en charge du mode sombre et utilise le HTML sémantique.

Ouvrir

Course_Grid_Layout_Component

Un composant de mise en page de grille réactif et visuellement attrayant pour les plates-formes éducatives, avec des cartes de cours avec des tons chauds de coucher de soleil, des ombres Material Design et la prise en charge du mode sombre.

Ouvrir