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.
HTML Code
<div class="bg-gray-800 dark:bg-gray-900 p-6">
<h1 class="text-4xl font-bold text-green-400 mb-4">Gallery</h1>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
<div class="bg-gray-700 dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg">
<img src="https://picsum.photos/400/300?random=1" alt="Gallery Image 1" class="w-full h-32 object-cover">
<div class="p-4">
<h2 class="text-xl font-bold text-pink-400">Project Title 1</h2>
<p class="text-gray-300 dark:text-gray-400">Short description of the project showcasing its highlights.</p>
<div class="mt-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full inline-block">
<span class="text-gray-200 dark:text-gray-300 ml-2">Author Name</span>
</div>
</div>
</div>
<div class="bg-gray-700 dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg">
<img src="https://picsum.photos/400/300?random=2" alt="Gallery Image 2" class="w-full h-32 object-cover">
<div class="p-4">
<h2 class="text-xl font-bold text-pink-400">Project Title 2</h2>
<p class="text-gray-300 dark:text-gray-400">Short description of the project showcasing its highlights.</p>
<div class="mt-2">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full inline-block">
<span class="text-gray-200 dark:text-gray-300 ml-2">Author Name</span>
</div>
</div>
</div>
<div class="bg-gray-700 dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg">
<img src="https://picsum.photos/400/300?random=3" alt="Gallery Image 3" class="w-full h-32 object-cover">
<div class="p-4">
<h2 class="text-xl font-bold text-pink-400">Project Title 3</h2>
<p class="text-gray-300 dark:text-gray-400">Short description of the project showcasing its highlights.</p>
<div class="mt-2">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full inline-block">
<span class="text-gray-200 dark:text-gray-300 ml-2">Author Name</span>
</div>
</div>
</div>
<div class="bg-gray-700 dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg">
<img src="https://picsum.photos/400/300?random=4" alt="Gallery Image 4" class="w-full h-32 object-cover">
<div class="p-4">
<h2 class="text-xl font-bold text-pink-400">Project Title 4</h2>
<p class="text-gray-300 dark:text-gray-400">Short description of the project showcasing its highlights.</p>
<div class="mt-2">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full inline-block">
<span class="text-gray-200 dark:text-gray-300 ml-2">Author Name</span>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant Galerie Rétro
Un composant de galerie réactif avec un style rétro/vintage, une palette de couleurs vives et une mise en page simple pour la consommation de blog/contenu, avec prise en charge du mode sombre. Utilise Tailwind CSS.
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.