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.
HTML Code
<div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 min-h-screen font-sans text-gray-800 dark:text-gray-200">
<!-- Component Title -->
<h1 class="text-4xl sm:text-5xl font-extrabold mb-8 text-center text-gray-900 dark:text-gray-100 drop-shadow-lg">
<span class="bg-clip-text text-transparent bg-gradient-to-r from-teal-500 to-blue-600 dark:from-teal-400 dark:to-blue-500">Crypto Art Vault</span>
</h1>
<!-- Gallery Controls (Top) -->
<div class="mb-8 flex flex-col sm:flex-row items-center justify-between rounded-xl p-4 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 shadow-neu-light-md dark:shadow-neu-dark-md">
<div class="flex items-center space-x-4 mb-4 sm:mb-0">
<button class="p-3 rounded-full bg-gradient-to-br from-teal-500 to-blue-600 dark:from-teal-400 dark:to-blue-500 text-white shadow-neu-light-inner dark:shadow-neu-dark-inner active:shadow-neu-light-pressed dark:active:shadow-neu-dark-pressed transition-all duration-200 flex items-center justify-center w-12 h-12 flex-shrink-0">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"></path></svg>
</button>
<button class="p-3 rounded-full bg-gradient-to-br from-blue-600 to-teal-500 dark:from-blue-500 dark:to-teal-400 text-white shadow-neu-light-inner dark:shadow-neu-dark-inner active:shadow-neu-light-pressed dark:active:shadow-neu-dark-pressed transition-all duration-200 flex items-center justify-center w-12 h-12 flex-shrink-0">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
<div class="relative inline-block text-left">
<button type="button" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-xl text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-800 shadow-neu-light-md dark:shadow-neu-dark-md hover:shadow-neu-light-inner dark:hover:shadow-neu-dark-inner focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 dark:focus:ring-teal-400 transition-all duration-200" id="options-menu" aria-haspopup="true" aria-expanded="true">
Category <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
</button>
<!-- Dropdown menu (hidden by default) - for a real implementation, this would be toggled by JS -->
<div class="origin-top-left absolute left-0 mt-2 w-56 rounded-md shadow-neu-light-lg dark:shadow-neu-dark-lg bg-gray-100 dark:bg-gray-800 ring-1 ring-black ring-opacity-5 hidden" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
<div class="py-1" role="none">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md transition-colors duration-200" role="menuitem">All NFTs</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md transition-colors duration-200" role="menuitem">Genesis Collection</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md transition-colors duration-200" role="menuitem">Digital Sculptures</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md transition-colors duration-200" role="menuitem">Pixel Art</a>
</div>
</div>
</div>
</div>
<div class="relative w-full sm:w-auto">
<input type="text" placeholder="Search NFTs..." class="py-3 pr-12 pl-6 w-full sm:w-72 rounded-xl bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 placeholder-gray-500 dark:placeholder-gray-400 shadow-neu-light-inner dark:shadow-neu-dark-inner focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-200 dark:ring-offset-gray-800 focus:ring-teal-500 dark:focus:ring-teal-400 transition-all duration-200">
<div class="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none text-gray-500 dark:text-gray-400">
<svg class="h-5 w-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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</div>
</div>
</div>
<!-- Gallery Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<!-- NFT Card 1 -->
<div class="group relative rounded-2xl p-4 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 shadow-neu-light-md dark:shadow-neu-dark-md hover:shadow-neu-light-lg dark:hover:shadow-neu-dark-lg transition-all duration-300 flex flex-col">
<div class="relative aspect-video rounded-xl overflow-hidden mb-4 shadow-neu-light-inner dark:shadow-neu-dark-inner">
<img src="https://picsum.photos/id/1053/400/225" alt="NFT Image" class="w-full h-full object-cover rounded-xl group-hover:scale-105 transition-transform duration-300">
<div class="absolute top-3 right-3 p-2 rounded-full bg-gray-50 dark:bg-gray-900 shadow-neu-light-md dark:shadow-neu-dark-md text-gray-700 dark:text-gray-300 text-xs font-semibold select-none">LIVE BID</div>
</div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2 truncate">The Cybernetic Golem</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2">A unique digital sculpture transcending physical limitations.</p>
<div class="flex items-center justify-between text-sm mb-4">
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Creator Avatar" class="w-8 h-8 rounded-full shadow-neu-light-inner dark:shadow-neu-dark-inner">
<span class="text-gray-700 dark:text-gray-300 font-medium">@NFT_Visionary</span>
</div>
<div class="flex items-center space-x-1">
<svg class="w-4 h-4 text-gray-600 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
<span class="text-gray-600 dark:text-gray-400">12 Likes</span>
</div>
</div>
<div class="relative flex items-center justify-between mt-auto pt-4 border-t border-gray-300 dark:border-gray-700">
<div class="flex flex-col">
<span class="text-xs text-gray-500 dark:text-gray-400">Current Bid</span>
<span class="text-lg font-bold text-teal-600 dark:text-teal-400">3.2 ETH</span>
</div>
<button class="px-5 py-2 rounded-xl bg-gradient-to-br from-blue-500 to-teal-600 dark:from-blue-400 dark:to-teal-500 text-white font-semibold shadow-neu-light-md dark:shadow-neu-dark-md active:shadow-neu-light-pressed dark:active:shadow-neu-dark-pressed transition-all duration-200">
Place Bid
</button>
</div>
</div>
<!-- NFT Card 2 -->
<div class="group relative rounded-2xl p-4 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 shadow-neu-light-md dark:shadow-neu-dark-md hover:shadow-neu-light-lg dark:hover:shadow-neu-dark-lg transition-all duration-300 flex flex-col">
<div class="relative aspect-video rounded-xl overflow-hidden mb-4 shadow-neu-light-inner dark:shadow-neu-dark-inner">
<img src="https://picsum.photos/id/1063/400/225" alt="NFT Image" class="w-full h-full object-cover rounded-xl group-hover:scale-105 transition-transform duration-300">
<div class="absolute top-3 right-3 p-2 rounded-full bg-gray-50 dark:bg-gray-900 shadow-neu-light-md dark:shadow-neu-dark-md text-gray-700 dark:text-gray-300 text-xs font-semibold select-none">ENDED</div>
</div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2 truncate">Quantum Landscapes</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2">Exploring the impossible geometries of quantum realms.</p>
<div class="flex items-center justify-between text-sm mb-4">
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Creator Avatar" class="w-8 h-8 rounded-full shadow-neu-light-inner dark:shadow-neu-dark-inner">
<span class="text-gray-700 dark:text-gray-300 font-medium">@PixelSynth</span>
</div>
<div class="flex items-center space-x-1">
<svg class="w-4 h-4 text-gray-600 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
<span class="text-gray-600 dark:text-gray-400">20 Likes</span>
</div>
</div>
<div class="relative flex items-center justify-between mt-auto pt-4 border-t border-gray-300 dark:border-gray-700">
<div class="flex flex-col">
<span class="text-xs text-gray-500 dark:text-gray-400">Sold For</span>
<span class="text-lg font-bold text-gray-900 dark:text-gray-100">5.0 ETH</span>
</div>
<button class="px-5 py-2 rounded-xl bg-gradient-to-br from-gray-400 to-gray-500 text-white font-semibold shadow-neu-light-md dark:shadow-neu-dark-md cursor-not-allowed opacity-70" disabled>
View Sale
</button>
</div>
</div>
<!-- NFT Card 3 -->
<div class="group relative rounded-2xl p-4 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 shadow-neu-light-md dark:shadow-neu-dark-md hover:shadow-neu-light-lg dark:hover:shadow-neu-dark-lg transition-all duration-300 flex flex-col">
<div class="relative aspect-video rounded-xl overflow-hidden mb-4 shadow-neu-light-inner dark:shadow-neu-dark-inner">
<img src="https://picsum.photos/id/111/400/225" alt="NFT Image" class="w-full h-full object-cover rounded-xl group-hover:scale-105 transition-transform duration-300">
<div class="absolute top-3 right-3 p-2 rounded-full bg-gray-50 dark:bg-gray-900 shadow-neu-light-md dark:shadow-neu-dark-md text-gray-700 dark:text-gray-300 text-xs font-semibold select-none">ON AUCTION</div>
</div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2 truncate">Neon Genesis Glitch</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2">A captivating glitch art piece from the 90s digital era.</p>
<div class="flex items-center justify-between text-sm mb-4">
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/men/50.jpg" alt="Creator Avatar" class="w-8 h-8 rounded-full shadow-neu-light-inner dark:shadow-neu-dark-inner">
<span class="text-gray-700 dark:text-gray-300 font-medium">@DataGhost</span>
</div>
<div class="flex items-center space-x-1">
<svg class="w-4 h-4 text-gray-600 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
<span class="text-gray-600 dark:text-gray-400">18 Likes</span>
</div>
</div>
<div class="relative flex items-center justify-between mt-auto pt-4 border-t border-gray-300 dark:border-gray-700">
<div class="flex flex-col">
<span class="text-xs text-gray-500 dark:text-gray-400">Min. Bid</span>
<span class="text-lg font-bold text-teal-600 dark:text-teal-400">1.8 ETH</span>
</div>
<button class="px-5 py-2 rounded-xl bg-gradient-to-br from-blue-500 to-teal-600 dark:from-blue-400 dark:to-teal-500 text-white font-semibold shadow-neu-light-md dark:shadow-neu-dark-md active:shadow-neu-light-pressed dark:active:shadow-neu-dark-pressed transition-all duration-200">
Place Bid
</button>
</div>
</div>
<!-- NFT Card 4 -->
<div class="group relative rounded-2xl p-4 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 shadow-neu-light-md dark:shadow-neu-dark-md hover:shadow-neu-light-lg dark:hover:shadow-neu-dark-lg transition-all duration-300 flex flex-col">
<div class="relative aspect-video rounded-xl overflow-hidden mb-4 shadow-neu-light-inner dark:shadow-neu-dark-inner">
<img src="https://picsum.photos/id/1075/400/225" alt="NFT Image" class="w-full h-full object-cover rounded-xl group-hover:scale-105 transition-transform duration-300">
<div class="absolute top-3 right-3 p-2 rounded-full bg-gray-50 dark:bg-gray-900 shadow-neu-light-md dark:shadow-neu-dark-md text-gray-700 dark:text-gray-300 text-xs font-semibold select-none">LIVE BID</div>
</div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2 truncate">The Decentralized Soul</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2">An abstract representation of the blockchain's core essence.</p>
<div class="flex items-center justify-between text-sm mb-4">
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/women/66.jpg" alt="Creator Avatar" class="w-8 h-8 rounded-full shadow-neu-light-inner dark:shadow-neu-dark-inner">
<span class="text-gray-700 dark:text-gray-300 font-medium">@Crypto_Canvas</span>
</div>
<div class="flex items-center space-x-1">
<svg class="w-4 h-4 text-gray-600 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
<span class="text-gray-600 dark:text-gray-400">15 Likes</span>
</div>
</div>
<div class="relative flex items-center justify-between mt-auto pt-4 border-t border-gray-300 dark:border-gray-700">
<div class="flex flex-col">
<span class="text-xs text-gray-500 dark:text-gray-400">Current Bid</span>
<span class="text-lg font-bold text-teal-600 dark:text-teal-400">2.5 ETH</span>
</div>
<button class="px-5 py-2 rounded-xl bg-gradient-to-br from-blue-500 to-teal-600 dark:from-blue-400 dark:to-teal-500 text-white font-semibold shadow-neu-light-md dark:shadow-neu-dark-md active:shadow-neu-light-pressed dark:active:shadow-neu-dark-pressed transition-all duration-200">
Place Bid
</button>
</div>
</div>
<!-- Placeholder Card for more items -->
<div class="flex flex-col items-center justify-center rounded-2xl p-6 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 shadow-neu-light-md dark:shadow-neu-dark-md border-2 border-dashed border-gray-400 dark:border-gray-600 text-gray-500 dark:text-gray-400 text-center">
<svg class="w-16 h-16 mb-4" 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="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<p class="text-lg font-semibold">Discover More NFTs</p>
<p class="text-sm mb-4">More unique digital creations await.</p>
<button class="px-6 py-3 rounded-xl bg-gradient-to-br from-teal-500 to-blue-600 dark:from-teal-400 dark:to-blue-500 text-white font-semibold shadow-neu-light-md dark:shadow-neu-dark-md active:shadow-neu-light-pressed dark:active:shadow-neu-dark-pressed transition-all duration-200">
Explore All
</button>
</div>
</div>
<!-- Bottom Navigation/Pagination (Skeuomorphic style) -->
<div class="mt-12 flex justify-center">
<nav class="inline-flex items-center space-x-2 rounded-2xl p-3 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 shadow-neu-light-md dark:shadow-neu-dark-md">
<button class="p-3 rounded-xl bg-gray-200 dark:bg-gray-800 text-gray-600 dark:text-gray-400 shadow-neu-light-inner dark:shadow-neu-dark-inner hover:text-teal-600 dark:hover:text-teal-400 active:shadow-neu-light-pressed dark:active:shadow-neu-dark-pressed transition-all duration-200">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
</button>
<a href="#" class="px-4 py-2 rounded-xl bg-blue-500 dark:bg-blue-600 text-white font-bold shadow-neu-light-md dark:shadow-neu-dark-md shadow-neu-light-inner dark:shadow-neu-dark-inner active:shadow-neu-light-pressed dark:active:shadow-neu-dark-pressed transition-all duration-200">1</a>
<a href="#" class="px-4 py-2 rounded-xl bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 shadow-neu-light-md dark:shadow-neu-dark-md hover:shadow-neu-light-inner dark:hover:shadow-neu-dark-inner active:shadow-neu-light-pressed dark:active:shadow-neu-dark-pressed transition-all duration-200">2</a>
<span class="px-4 py-2 text-gray-500 dark:text-gray-400">...</span>
<a href="#" class="px-4 py-2 rounded-xl bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 shadow-neu-light-md dark:shadow-neu-dark-md hover:shadow-neu-light-inner dark:hover:shadow-neu-dark-inner active:shadow-neu-light-pressed dark:active:shadow-neu-dark-pressed transition-all duration-200">10</a>
<button class="p-3 rounded-xl bg-gray-200 dark:bg-gray-800 text-gray-600 dark:text-gray-400 shadow-neu-light-inner dark:shadow-neu-dark-inner hover:text-teal-600 dark:hover:text-teal-400 active:shadow-neu-light-pressed dark:active:shadow-neu-dark-pressed transition-all duration-200">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10l-3.293-3.293a1 1 0 111.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
</button>
</nav>
</div>
</div>
<!-- Custom Tailwind CSS (for skeuomorphism) -->
<style>
/* Light Mode Shadows */
.shadow-neu-light-md {
box-shadow: 6px 6px 12px rgba(174, 174, 192, 0.4), -6px -6px 12px rgba(255, 255, 255, 0.9);
}
.shadow-neu-light-lg {
box-shadow: 10px 10px 20px rgba(174, 174, 192, 0.5), -10px -10px 20px rgba(255, 255, 255, 1);
}
.shadow-neu-light-inner {
box-shadow: inset 3px 3px 6px rgba(174, 174, 192, 0.3), inset -3px -3px 6px rgba(255, 255, 255, 0.8);
}
.shadow-neu-light-pressed {
box-shadow: inset 6px 6px 12px rgba(174, 174, 192, 0.4), inset -6px -6px 12px rgba(255, 255, 255, 0.9);
}
/* Dark Mode Shadows */
.dark .shadow-neu-dark-md {
box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.6), -6px -6px 12px rgba(100, 100, 100, 0.2);
}
.dark .shadow-neu-dark-lg {
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.7), -10px -10px 20px rgba(100, 100, 100, 0.3);
}
.dark .shadow-neu-dark-inner {
box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.5), inset -3px -3px 6px rgba(100, 100, 100, 0.15);
}
.dark .shadow-neu-dark-pressed {
box-shadow: inset 6px 6px 12px rgba(0, 0, 0, 0.6), inset -6px -6px 12px rgba(100, 100, 100, 0.2);
}
</style>Composants associés
Composante galerie brutaliste
Un composant de galerie réactif d’inspiration brutaliste pour les plateformes de divertissement, avec des neutres froids à contraste élevé et la prise en charge du mode sombre.
Composant Galerie
Un composant de galerie réactif avec un design Glassmorphism, une palette de couleurs analogue, une mise en page complexe et la prise en charge du thème sombre pour le commerce électronique.