Composant Galerie
Un composant de galerie réactif utilisant Tailwind CSS avec un design Skeuomorphism, une palette de couleurs pastel et une complexité modérée à des fins de médias sociaux. Inclut la prise en charge du mode sombre et utilise picsum.photos pour les images et randomuser.me pour les avatars.
HTML Code
<div class="container mx-auto px-4 py-8 dark:bg-gray-800">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white rounded-lg shadow-xl overflow-hidden dark:bg-gray-700">
<img src="https://picsum.photos/seed/1/400/300" alt="Gallery Image 1" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold mb-2 dark:text-white">Image Title 1</h3>
<p class="text-gray-600 dark:text-gray-300">A brief description of the image goes here.</p>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar of user 1">
<div class="text-sm">
<p class="text-gray-900 leading-none dark:text-white">User Name 1</p>
<p class="text-gray-600 dark:text-gray-400">Posted on January 1, 2024</p>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-xl overflow-hidden dark:bg-gray-700">
<img src="https://picsum.photos/seed/2/400/300" alt="Gallery Image 2" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold mb-2 dark:text-white">Image Title 2</h3>
<p class="text-gray-600 dark:text-gray-300">A brief description of the image goes here.</p>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar of user 2">
<div class="text-sm">
<p class="text-gray-900 leading-none dark:text-white">User Name 2</p>
<p class="text-gray-600 dark:text-gray-400">Posted on January 1, 2024</p>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-xl overflow-hidden dark:bg-gray-700">
<img src="https://picsum.photos/seed/3/400/300" alt="Gallery Image 3" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold mb-2 dark:text-white">Image Title 3</h3>
<p class="text-gray-600 dark:text-gray-300">A brief description of the image goes here.</p>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar of user 3">
<div class="text-sm">
<p class="text-gray-900 leading-none dark:text-white">User Name 3</p>
<p class="text-gray-600 dark:text-gray-400">Posted on January 1, 2024</p>
</div>
</div>
</div>
</div>
</div>
</div>Composants associés
Skeuomorphism, Grayscale Gallery Component
Galerie de photos réactive avec un design Skeuomorphism, une palette de couleurs en niveaux de gris et une mise en page complexe pour les médias sociaux. Inclut la prise en charge du thème sombre.
Composant Galerie de Luxe
Un composant de galerie élégant et sophistiqué conçu pour les plateformes musicales et audio, avec des neutres chauds, des mises en page réactives et la prise en charge du mode sombre.
Composant Galerie
Composant de galerie réactive avec conception 3D, schéma de couleurs analogues et prise en charge du mode sombre pour les interfaces de médias sociaux.