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.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8">
<div class="container mx-auto">
<h1 class="text-4xl font-bold text-center mb-8 text-gray-800 dark:text-white">Our Vibrant Gallery</h1>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<!-- Gallery Item 1 -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 group">
<img src="https://picsum.photos/seed/picsum1/400/300" alt="Gallery Image 1" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-bold text-xl mb-2 text-purple-800 dark:text-purple-300">Project Alpha</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm">A sleek design project showcasing modern aesthetics.</p>
</div>
</div>
<!-- Gallery Item 2 -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 group">
<img src="https://picsum.photos/seed/picsum2/400/300" alt="Gallery Image 2" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-bold text-xl mb-2 text-red-800 dark:text-red-300">Innovate Beta</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm">Cutting-edge technology integrated with user-centric design.</p>
</div>
</div>
<!-- Gallery Item 3 -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 group">
<img src="https://picsum.photos/seed/picsum3/400/300" alt="Gallery Image 3" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-bold text-xl mb-2 text-green-800 dark:text-green-300">Data Drive</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm">Visualizing complex data into intuitive and actionable insights.</p>
</div>
</div>
<!-- Gallery Item 4 -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 group">
<img src="https://picsum.photos/seed/picsum4/400/300" alt="Gallery Image 4" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-bold text-xl mb-2 text-blue-800 dark:text-blue-300">Analytics Flow</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm">Interactive dashboards for real-time performance monitoring.</p>
</div>
</div>
<!-- Gallery Item 5 -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 group">
<img src="https://picsum.photos/seed/picsum5/400/300" alt="Gallery Image 5" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-bold text-xl mb-2 text-yellow-800 dark:text-yellow-300">Growth Metrics</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm">Tracking key growth indicators with dynamic charts.</p>
</div>
</div>
<!-- Gallery Item 6 -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 group">
<img src="https://picsum.photos/seed/picsum6/400/300" alt="Gallery Image 6" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-bold text-xl mb-2 text-pink-800 dark:text-pink-300">User Insights</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm">Understanding user behavior through comprehensive reports.</p>
</div>
</div>
</div>
</div>
</div>Composants associés
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.
Composant Galerie
Un composant de galerie réactif avec un style de conception 3D, avec de la profondeur et de l’engagement grâce à des effets d’ombre et de survol. Il prend en charge les thèmes sombres et clairs.
Composant Galerie
Un composant de galerie simple utilisant Tailwind CSS, mettant en œuvre un style de conception Brutalism avec une palette de couleurs triadique et la prise en charge du thème sombre pour présenter des travaux ou des produits.