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.
HTML Code
<div class="bg-gray-200 dark:bg-gray-800 min-h-screen p-8">
<div class="container mx-auto">
<h1 class="text-4xl font-bold text-center text-gray-800 dark:text-gray-200 mb-12">Photo Gallery</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Gallery Item 1 -->
<div class="bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden transform transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/600/400?random=1" alt="Gallery Image" class="w-full h-64 object-cover">
<div class="p-6">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-400 dark:border-gray-600 mr-4">
<p class="text-gray-700 dark:text-gray-300 font-semibold">John Doe</p>
</div>
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">Image Title</h2>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="flex justify-between items-center">
<div class="flex space-x-4">
<button class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
</svg>
</button>
<button class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.986 9.986 0 01-4.165-.915L3 20l1.47-3.674A9.986 9.986 0 013 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
</svg>
</button>
</div>
<span class="text-gray-600 dark:text-gray-400 text-sm">3 Likes</span>
</div>
</div>
</div>
<!-- Gallery Item 2 (Repeat structure for more items) -->
<div class="bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden transform transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/600/400?random=2" alt="Gallery Image" class="w-full h-64 object-cover">
<div class="p-6">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-400 dark:border-gray-600 mr-4">
<p class="text-gray-700 dark:text-gray-300 font-semibold">Jane Smith</p>
</div>
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">Another Image Title</h2>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="flex justify-between items-center">
<div class="flex space-x-4">
<button class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
</svg>
</button>
<button class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.986 9.986 0 01-4.165-.915L3 20l1.47-3.674A9.986 9.986 0 013 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
</svg>
</button>
</div>
<span class="text-gray-600 dark:text-gray-400 text-sm">5 Likes</span>
</div>
</div>
</div>
<!-- Gallery Item 3 (Repeat structure for more items) -->
<div class="bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden transform transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/600/400?random=3" alt="Gallery Image" class="w-full h-64 object-cover">
<div class="p-6">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-400 dark:border-gray-600 mr-4">
<p class="text-gray-700 dark:text-gray-300 font-semibold">Peter Jones</p>
</div>
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">My Travel Photo</h2>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<div class="flex justify-between items-center">
<div class="flex space-x-4">
<button class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
</svg>
</button>
<button class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.986 9.986 0 01-4.165-.915L3 20l1.47-3.674A9.986 9.986 0 013 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
</svg>
</button>
</div>
<span class="text-gray-600 dark:text-gray-400 text-sm">8 Likes</span>
</div>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant Galerie
Un composant de galerie de style Neumorphisme avec des tons de terre à des fins de blog/contenu. Ce composant dispose d’une interface riche avec plusieurs éléments interactifs, d’un design réactif et d’une prise en charge du thème sombre.
Composant Galerie
Un composant de galerie réactif utilisant Tailwind CSS avec le style Material Design, adapté à un tableau de bord avec prise en charge du thème sombre.