JewelTone_Photography_Gallery
Un composant de galerie de photographie complexe et réactif avec des couleurs de bijou et une mise en page typographique épurée, avec des systèmes de grille et la prise en charge du mode sombre. Idéal pour les portfolios de photographes.
HTML Code
<div class="bg-zinc-100 dark:bg-zinc-900 min-h-screen p-4 sm:p-6 lg:p-8 font-sans transition-colors duration-300">
<!-- Gallery Header -->
<header class="max-w-7xl mx-auto mb-8 sm:mb-12 text-center">
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-emerald-700 dark:text-emerald-400 mb-4 tracking-tight">
Capturing Moments
</h1>
<p class="text-lg sm:text-xl text-zinc-700 dark:text-zinc-300 leading-relaxed max-w-2xl mx-auto">
Explore a curated collection of visual stories, where light meets emotion and every frame tells a tale.
</p>
<div class="mt-6 flex justify-center space-x-4">
<a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-sapphire-700 hover:bg-sapphire-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sapphire-500 dark:bg-sapphire-500 dark:hover:bg-sapphire-600 dark:focus:ring-sapphire-400">
View All Galleries
</a>
<a href="#" class="inline-flex items-center px-6 py-3 border border-zinc-300 dark:border-zinc-700 text-base font-medium rounded-md text-zinc-700 bg-white hover:bg-zinc-50 dark:bg-zinc-800 dark:text-zinc-300 dark:hover:bg-zinc-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
About The Artist
</a>
</div>
</header>
<!-- Gallery Categories/Filters -->
<nav class="max-w-7xl mx-auto mb-8 sm:mb-12">
<ul class="flex flex-wrap justify-center gap-3 sm:gap-4">
<li>
<a href="#" class="px-4 py-2 rounded-full text-sm font-medium bg-ruby-200 text-ruby-800 dark:bg-ruby-800 dark:text-ruby-200 hover:bg-ruby-300 dark:hover:bg-ruby-700 transition-colors duration-200">
All
</a>
</li>
<li>
<a href="#" class="px-4 py-2 rounded-full text-sm font-medium bg-zinc-200 text-zinc-800 dark:bg-zinc-700 dark:text-zinc-200 hover:bg-zinc-300 dark:hover:bg-zinc-600 transition-colors duration-200">
Nature
</a>
</li>
<li>
<a href="#" class="px-4 py-2 rounded-full text-sm font-medium bg-zinc-200 text-zinc-800 dark:bg-zinc-700 dark:text-zinc-200 hover:bg-zinc-300 dark:hover:bg-zinc-600 transition-colors duration-200">
Portraits
</a>
</li>
<li>
<a href="#" class="px-4 py-2 rounded-full text-sm font-medium bg-zinc-200 text-zinc-800 dark:bg-zinc-700 dark:text-zinc-200 hover:bg-zinc-300 dark:hover:bg-zinc-600 transition-colors duration-200">
Abstract
</a>
</li>
<li>
<a href="#" class="px-4 py-2 rounded-full text-sm font-medium bg-zinc-200 text-zinc-800 dark:bg-zinc-700 dark:text-zinc-200 hover:bg-zinc-300 dark:hover:bg-zinc-600 transition-colors duration-200">
Urban
</a>
</li>
<li>
<a href="#" class="px-4 py-2 rounded-full text-sm font-medium bg-zinc-200 text-zinc-800 dark:bg-zinc-700 dark:text-zinc-200 hover:bg-zinc-300 dark:hover:bg-zinc-600 transition-colors duration-200">
Events
</a>
</li>
</ul>
</nav>
<!-- Photo Grid -->
<section class="max-w-7xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<!-- Photo Card 1 -->
<article class="relative group rounded-lg overflow-hidden shadow-lg transform hover:scale-102 transition-all duration-300 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700">
<img src="https://picsum.photos/id/1057/700/500" alt="Forest Stream" class="w-full h-64 object-cover object-center group-hover:opacity-80 transition-opacity duration-300">
<div class="p-4">
<h3 class="text-xl font-semibold text-sapphire-800 dark:text-sapphire-400 mb-2">Whispers of the Forest</h3>
<p class="text-zinc-600 dark:text-zinc-400 text-sm mb-3">A serene stream winding through ancient trees, captured in soft morning light.</p>
<div class="flex items-center text-zinc-500 dark:text-zinc-400 text-xs">
<svg class="w-4 h-4 mr-1 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 5a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V7a2 2 0 00-2-2h-1.586a1 1 0 01-.707-.293l-1.121-1.121A1 1 0 0011.379 3H8.621a1 1 0 00-.707.293L6.293 4.707A1 1 0 015.586 5H4zm6 9a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"></path></svg>
<span>Nature & Landscape</span>
</div>
<div class="absolute inset-0 bg-gradient-to-t from-zinc-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-between p-4">
<span class="text-white text-sm font-bold">5.2K Views</span>
<button class="p-2 rounded-full bg-sapphire-600 text-white hover:bg-sapphire-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sapphire-500 dark:bg-sapphire-500 dark:hover:bg-sapphire-600">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
</button>
</div>
</div>
</article>
<!-- Photo Card 2 -->
<article class="relative group rounded-lg overflow-hidden shadow-lg transform hover:scale-102 transition-all duration-300 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700">
<img src="https://picsum.photos/id/1025/700/500" alt="Woman's Portrait" class="w-full h-64 object-cover object-center group-hover:opacity-80 transition-opacity duration-300">
<div class="p-4">
<h3 class="text-xl font-semibold text-sapphire-800 dark:text-sapphire-400 mb-2">Gaze of Serenity</h3>
<p class="text-zinc-600 dark:text-zinc-400 text-sm mb-3">A captivating portrait capturing the quiet strength and beauty of a woman.</p>
<div class="flex items-center text-zinc-500 dark:text-zinc-400 text-xs">
<svg class="w-4 h-4 mr-1 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg>
<span>Portraits</span>
</div>
<div class="absolute inset-0 bg-gradient-to-t from-zinc-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-between p-4">
<span class="text-white text-sm font-bold">8.1K Views</span>
<button class="p-2 rounded-full bg-sapphire-600 text-white hover:bg-sapphire-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sapphire-500 dark:bg-sapphire-500 dark:hover:bg-sapphire-600">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
</button>
</div>
</div>
</article>
<!-- Photo Card 3 -->
<article class="relative group rounded-lg overflow-hidden shadow-lg transform hover:scale-102 transition-all duration-300 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700">
<img src="https://picsum.photos/id/1080/700/500" alt="Abstract Light" class="w-full h-64 object-cover object-center group-hover:opacity-80 transition-opacity duration-300">
<div class="p-4">
<h3 class="text-xl font-semibold text-sapphire-800 dark:text-sapphire-400 mb-2">Chromatic Dance</h3>
<p class="text-zinc-600 dark:text-zinc-400 text-sm mb-3">An mesmerizing play of light and shadow, forming abstract patterns.</p>
<div class="flex items-center text-zinc-500 dark:text-zinc-400 text-xs">
<svg class="w-4 h-4 mr-1 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.243 3.636a1 1 0 011.514 0l3.05 4.195a1 1 0 01-.061 1.488l-2.43 2.193a1 1 0 01-1.353-.105l-1.89-2.122a1 1 0 01.105-1.353l2.193-2.43a1 1 0 011.488-.061L12.364 8.243a1 1 0 00-.707 1.707l-2.414 2.414a1 1 0 01-1.414 0L6.707 10.707a1 1 0 00-1.707.707l2.414 2.414a1 1 0 010 1.414l-2.414 2.414a1 1 0 00-.707 1.707l2.414 2.414a1 1 0 010 1.414l-2.414 2.414a1 1 0 00-.707 1.707l2.414 2.414a1 1 0 010 1.414L3.636 17.243a1 1 0 01-1.414 0L.707 15.121a1 1 0 00-1.707.707l2.414 2.414a1 1 0 010 1.414L.707 20a1 1 0 00-.707.707l2.414 2.414a1 1 0 010 1.414L3.636 24.364a1 1 0 011.414 0L5.757 26a1 1 0 001.707-.707l-2.414-2.414a1 1 0 010-1.414zM10 18a8 8 0 100-16 8 8 0 000 16z" clip-rule="evenodd"></path></svg>
<span>Abstract Art</span>
</div>
<div class="absolute inset-0 bg-gradient-to-t from-zinc-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-between p-4">
<span class="text-white text-sm font-bold">3.9K Views</span>
<button class="p-2 rounded-full bg-sapphire-600 text-white hover:bg-sapphire-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sapphire-500 dark:bg-sapphire-500 dark:hover:bg-sapphire-600">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
</button>
</div>
</div>
</article>
<!-- Photo Card 4 -->
<article class="relative group rounded-lg overflow-hidden shadow-lg transform hover:scale-102 transition-all duration-300 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700">
<img src="https://picsum.photos/id/1012/700/500" alt="Cityscape at Night" class="w-full h-64 object-cover object-center group-hover:opacity-80 transition-opacity duration-300">
<div class="p-4">
<h3 class="text-xl font-semibold text-sapphire-800 dark:text-sapphire-400 mb-2">Neon Metropolis</h3>
<p class="text-zinc-600 dark:text-zinc-400 text-sm mb-3">The vibrant energy of a city skyline illuminated by countless lights.</p>
<div class="flex items-center text-zinc-500 dark:text-zinc-400 text-xs">
<svg class="w-4 h-4 mr-1 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
<span>Urban & Architecture</span>
</div>
<div class="absolute inset-0 bg-gradient-to-t from-zinc-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-between p-4">
<span class="text-white text-sm font-bold">6.5K Views</span>
<button class="p-2 rounded-full bg-sapphire-600 text-white hover:bg-sapphire-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sapphire-500 dark:bg-sapphire-500 dark:hover:bg-sapphire-600">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
</button>
</div>
</div>
</article>
<!-- Photo Card 5 -->
<article class="relative group rounded-lg overflow-hidden shadow-lg transform hover:scale-102 transition-all duration-300 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700">
<img src="https://picsum.photos/id/1039/700/500" alt="Desert Landscape" class="w-full h-64 object-cover object-center group-hover:opacity-80 transition-opacity duration-300">
<div class="p-4">
<h3 class="text-xl font-semibold text-sapphire-800 dark:text-sapphire-400 mb-2">Echoes of the Sand</h3>
<p class="text-zinc-600 dark:text-zinc-400 text-sm mb-3">Vast and silent desert landscape under a dramatic sky.</p>
<div class="flex items-center text-zinc-500 dark:text-zinc-400 text-xs">
<svg class="w-4 h-4 mr-1 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 5a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V7a2 2 0 00-2-2h-1.586a1 1 0 01-.707-.293l-1.121-1.121A1 1 0 0011.379 3H8.621a1 1 0 00-.707.293L6.293 4.707A1 1 0 015.586 5H4zm6 9a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"></path></svg>
<span>Nature & Landscape</span>
</div>
<div class="absolute inset-0 bg-gradient-to-t from-zinc-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-between p-4">
<span class="text-white text-sm font-bold">4.8K Views</span>
<button class="p-2 rounded-full bg-sapphire-600 text-white hover:bg-sapphire-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sapphire-500 dark:bg-sapphire-500 dark:hover:bg-sapphire-600">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
</button>
</div>
</div>
</article>
<!-- Photo Card 6 -->
<article class="relative group rounded-lg overflow-hidden shadow-lg transform hover:scale-102 transition-all duration-300 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700">
<img src="https://picsum.photos/id/1042/700/500" alt="Coffee Shop Interior" class="w-full h-64 object-cover object-center group-hover:opacity-80 transition-opacity duration-300">
<div class="p-4">
<h3 class="text-xl font-semibold text-sapphire-800 dark:text-sapphire-400 mb-2">Urban Canvas</h3>
<p class="text-zinc-600 dark:text-zinc-400 text-sm mb-3">The cozy ambiance of a bustling coffee shop.</p>
<div class="flex items-center text-zinc-500 dark:text-zinc-400 text-xs">
<svg class="w-4 h-4 mr-1 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
<span>Urban & Events</span>
</div>
<div class="absolute inset-0 bg-gradient-to-t from-zinc-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-between p-4">
<span class="text-white text-sm font-bold">5.9K Views</span>
<button class="p-2 rounded-full bg-sapphire-600 text-white hover:bg-sapphire-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sapphire-500 dark:bg-sapphire-500 dark:hover:bg-sapphire-600">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
</button>
</div>
</div>
</article>
<!-- Photo Card 7 -->
<article class="relative group rounded-lg overflow-hidden shadow-lg transform hover:scale-102 transition-all duration-300 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700">
<img src="https://picsum.photos/id/1050/700/500" alt="Mountains and Lake" class="w-full h-64 object-cover object-center group-hover:opacity-80 transition-opacity duration-300">
<div class="p-4">
<h3 class="text-xl font-semibold text-sapphire-800 dark:text-sapphire-400 mb-2">Alpine Reflection</h3>
<p class="text-zinc-600 dark:text-zinc-400 text-sm mb-3">Majestic mountains mirroring in a clear alpine lake.</p>
<div class="flex items-center text-zinc-500 dark:text-zinc-400 text-xs">
<svg class="w-4 h-4 mr-1 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 5a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V7a2 2 0 00-2-2h-1.586a1 1 0 01-.707-.293l-1.121-1.121A1 1 0 0011.379 3H8.621a1 1 0 00-.707.293L6.293 4.707A1 1 0 015.586 5H4zm6 9a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"></path></svg>
<span>Nature & Landscape</span>
</div>
<div class="absolute inset-0 bg-gradient-to-t from-zinc-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-between p-4">
<span class="text-white text-sm font-bold">7.0K Views</span>
<button class="p-2 rounded-full bg-sapphire-600 text-white hover:bg-sapphire-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sapphire-500 dark:bg-sapphire-500 dark:hover:bg-sapphire-600">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
</button>
</div>
</div>
</article>
<!-- Photo Card 8 -->
<article class="relative group rounded-lg overflow-hidden shadow-lg transform hover:scale-102 transition-all duration-300 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700">
<img src="https://picsum.photos/id/1060/700/500" alt="Historical Building" class="w-full h-64 object-cover object-center group-hover:opacity-80 transition-opacity duration-300">
<div class="p-4">
<h3 class="text-xl font-semibold text-sapphire-800 dark:text-sapphire-400 mb-2">Timeless Stone</h3>
<p class="text-zinc-600 dark:text-zinc-400 text-sm mb-3">An ancient architectural marvel standing against the test of time.</p>
<div class="flex items-center text-zinc-500 dark:text-zinc-400 text-xs">
<svg class="w-4 h-4 mr-1 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
<span>Architecture</span>
</div>
<div class="absolute inset-0 bg-gradient-to-t from-zinc-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-between p-4">
<span class="text-white text-sm font-bold">4.1K Views</span>
<button class="p-2 rounded-full bg-sapphire-600 text-white hover:bg-sapphire-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sapphire-500 dark:bg-sapphire-500 dark:hover:bg-sapphire-600">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
</button>
</div>
</div>
</article>
</section>
<!-- Call to Action / Footer -->
<footer class="max-w-7xl mx-auto mt-12 sm:mt-16 text-center">
<div class="bg-ruby-100 dark:bg-ruby-900 rounded-lg p-6 sm:p-8 flex flex-col sm:flex-row items-center justify-between shadow-inner space-y-4 sm:space-y-0">
<div class="text-ruby-800 dark:text-ruby-200 text-xl sm:text-2xl font-bold">
Ready to bring your vision to life?
</div>
<a href="#" class="px-8 py-3 bg-ruby-600 text-white rounded-md shadow-lg hover:bg-ruby-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-ruby-500 dark:bg-ruby-500 dark:hover:bg-ruby-600">
Contact Me
</a>
</div>
<p class="mt-8 text-zinc-500 dark:text-zinc-400 text-sm">
© 2023 JewelTone Photography. All rights reserved.
</p>
</footer>
</div>Composants associés
Composant Galerie
Un composant de galerie d’inspiration rétro/vintage avec une palette de couleurs vives, une complexité modérée et un design réactif avec prise en charge du thème sombre. Conçu pour la consommation de contenu.
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.
Composant Galerie
Un composant de galerie réactif avec un design plat minimaliste, avec des images et une prise en charge du thème sombre à l’aide de Tailwind CSS.