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
Composant Neumorphism Gallery
Un composant de galerie Neumorphic réactif avec prise en charge du mode sombre. Les images sont des espaces réservés de picsum.photos et des avatars de randomuser.me.
Composant Galerie
Un composant de galerie réactif avec un effet de glassmorphism, des couleurs vives et une prise en charge du thème sombre, adapté à un tableau de bord.
Galerie de crypto-monnaies skeuomorphes
Un composant de galerie skeuomorphe complexe conçu pour les applications de crypto-monnaie et de blockchain, avec des couleurs complémentaires, une réactivité et une prise en charge du mode sombre. Il imite des éléments du monde réel tels que des boutons encastrés et des cadres en relief.