Brutalist_Retro_Media_Embed_E-commerce
Un composant d’intégration multimédia complexe, réactif et de style brutaliste pour le commerce électronique, avec un contraste élevé, une palette de couleurs rétro, la prise en charge du mode sombre et de multiples éléments interactifs pour la présentation des produits.
HTML Code
<div class="font-sans bg-[#F0E6D2] text-[#333333] dark:bg-[#1E272C] dark:text-[#E0E0E0] p-4 sm:p-6 md:p-8 lg:p-12 min-h-screen">
<div class="max-w-7xl mx-auto border-4 border-[#8B0000] dark:border-[#FFD700] bg-[#EAE0C8] dark:bg-[#2C3E50] shadow-[10px_10px_0px_0px_#8B0000] dark:shadow-[10px_10px_0px_0px_#FFD700] relative overflow-hidden">
<div class="absolute top-0 left-0 w-full h-full border-t-4 border-l-4 border-b-4 border-r-4 border-[#8B0000] dark:border-[#FFD700] pointer-events-none z-10"></div>
<!-- Header Bar -->
<div class="bg-[#8B0000] dark:bg-[#FFD700] text-[#F0E6D2] dark:text-[#1E272C] p-3 border-b-4 border-[#333333] dark:border-[#FFD700] relative z-20">
<div class="flex items-center justify-between">
<h2 class="text-xl sm:text-2xl font-bold uppercase tracking-wider">// PRODUCT SHOWCASE : ITEM #1337</h2>
<div class="flex space-x-2">
<button class="px-3 py-1 bg-[#333333] text-[#F0E6D2] text-sm font-bold uppercase border-2 border-[#F0E6D2] hover:bg-[#555555] dark:bg-[#1E272C] dark:text-[#FFD700] dark:border-[#FFD700] dark:hover:bg-[#334455]">X</button>
<button class="px-3 py-1 bg-[#333333] text-[#F0E6D2] text-sm font-bold uppercase border-2 border-[#F0E6D2] hover:bg-[#555555] dark:bg-[#1E272C] dark:text-[#FFD700] dark:border-[#FFD700] dark:hover:bg-[#334455]">_</button>
<button class="px-3 py-1 bg-[#333333] text-[#F0E6D2] text-sm font-bold uppercase border-2 border-[#F0E6D2] hover:bg-[#555555] dark:bg-[#1E272C] dark:text-[#FFD700] dark:border-[#FFD700] dark:hover:bg-[#334455]">[]</button>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-0 relative z-0">
<!-- Main Media Area (left/top) -->
<div class="md:col-span-2 lg:col-span-3 border-r-4 border-b-4 md:border-b-0 border-[#8B0000] dark:border-[#FFD700] p-4 md:p-6 lg:p-8 flex items-center justify-center bg-[#D2B48C] dark:bg-[#34495E]">
<div class="w-full aspect-video bg-[#A0522D] dark:bg-[#2C3E50] overflow-hidden border-4 border-[#333333] dark:border-[#FFD700] shadow-[5px_5px_0px_0px_#333333] dark:shadow-[5px_5px_0px_0px_#FFD700]">
<!-- Placeholder for Video/Main Image -->
<img src="https://picsum.photos/1000/562?random=1" alt="Main Product Media" class="w-full h-full object-cover grayscale opacity-90 hover:grayscale-0 hover:opacity-100 transition-all duration-300">
</div>
</div>
<!-- Product Info / Controls (right/bottom) -->
<div class="md:col-span-1 lg:col-span-1 p-4 md:p-6 lg:p-8 bg-[#ECC9A3] dark:bg-[#4A636F] flex flex-col justify-between border-b-4 md:border-b-0 md:border-l-4 md:border-t-0 border-[#8B0000] dark:border-[#FFD700]">
<div>
<h3 class="text-2xl sm:text-3xl font-bold uppercase mb-2 text-[#8B0000] dark:text-[#FFD700]">Vintage Gizmo XL</h3>
<p class="text-base sm:text-lg mb-4 leading-tight text-[#333333] dark:text-[#E0E0E0]">A retro-futuristic device for analog data manipulation. Extremely rare. Acts like a charm, looks like a beast.</p>
<div class="flex items-baseline mb-4">
<p class="text-4xl font-extrabold text-[#A0522D] dark:text-[#FF9900] mr-2">$499.<span class="text-3xl">99</span></p>
<p class="text-2xl line-through text-[#666666] dark:text-[#999999]">$699.<span class="text-xl">99</span></p>
</div>
<div class="mb-4 border-b-2 border-[#8B0000] dark:border-[#FFD700] pb-4">
<h4 class="text-lg font-bold uppercase mb-2 text-[#8B0000] dark:text-[#FFD700]">// STATUS</h4>
<div class="flex justify-around text-center">
<div class="flex-1">
<p class="text-xl font-bold text-[#333333] dark:text-[#E0E0E0]">IN STOCK</p>
<p class="text-sm text-[#666666] dark:text-[#999999]">Qty: <span class="font-bold">1</span></p>
</div>
<div class="flex-1">
<p class="text-xl font-bold text-[#E0B200] dark:text-[#99E000]">LIMITED</p>
<p class="text-sm text-[#666666] dark:text-[#999999]">Edition</p>
</div>
</div>
</div>
</div>
<div class="space-y-4">
<button class="w-full py-4 bg-[#8B0000] dark:bg-[#FFD700] text-[#F0E6D2] dark:text-[#1E272C] text-xl font-extrabold uppercase border-4 border-[#333333] dark:border-[#1E272C] shadow-[5px_5px_0px_0px_#333333] dark:shadow-[5px_5px_0px_0px_#1E272C] hover:shadow-[2px_2px_0px_0px_#333333] dark:hover:shadow-[2px_2px_0px_0px_#1E272C] hover:translate-x-2 hover:translate-y-2 transition-all duration-150">
ADD TO CART
</button>
<button class="w-full py-3 bg-[#A0522D] dark:bg-[#2C3E50] text-[#F0E6D2] dark:text-[#FFD700] text-lg font-bold uppercase border-2 border-[#333333] dark:border-[#FFD700] hover:bg-[#B0633C] dark:hover:bg-[#3A5060]">
MORE DETAILS
</button>
</div>
</div>
<!-- Thumbnail Gallery -->
<div class="col-span-1 md:col-span-3 lg:col-span-4 p-4 md:p-6 lg:p-8 border-t-4 border-[#8B0000] dark:border-[#FFD700] bg-[#D2B48C] dark:bg-[#34495E]">
<h4 class="text-lg font-bold uppercase mb-4 text-[#8B0000] dark:text-[#FFD700]">// RELATED VISUALS</h4>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-4">
<div class="aspect-video bg-[#A0522D] dark:bg-[#2C3E50] overflow-hidden border-2 border-[#333333] dark:border-[#FFD700] cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 shadow-[3px_3px_0px_0px_#333333] dark:shadow-[3px_3px_0px_0px_#FFD700]">
<img src="https://picsum.photos/300/200?random=2" alt="Thumbnail 1" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-filter duration-300">
</div>
<div class="aspect-video bg-[#A0522D] dark:bg-[#2C3E50] overflow-hidden border-2 border-[#333333] dark:border-[#FFD700] cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 shadow-[3px_3px_0px_0px_#333333] dark:shadow-[3px_3px_0px_0px_#FFD700]">
<img src="https://picsum.photos/300/200?random=3" alt="Thumbnail 2" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-filter duration-300">
</div>
<div class="aspect-video bg-[#A0522D] dark:bg-[#2C3E50] overflow-hidden border-2 border-[#333333] dark:border-[#FFD700] cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 shadow-[3px_3px_0px_0px_#333333] dark:shadow-[3px_3px_0px_0px_#FFD700]">
<img src="https://picsum.photos/300/200?random=4" alt="Thumbnail 3" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-filter duration-300">
</div>
<div class="aspect-video bg-[#A0522D] dark:bg-[#2C3E50] overflow-hidden border-2 border-[#333333] dark:border-[#FFD700] cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 shadow-[3px_3px_0px_0px_#333333] dark:shadow-[3px_3px_0px_0px_#FFD700]">
<img src="https://picsum.photos/300/200?random=5" alt="Thumbnail 4" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-filter duration-300">
</div>
<div class="aspect-video bg-[#A0522D] dark:bg-[#2C3E50] overflow-hidden border-2 border-[#333333] dark:border-[#FFD700] cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 shadow-[3px_3px_0px_0px_#333333] dark:shadow-[3px_3px_0px_0px_#FFD700] hidden sm:block">
<img src="https://picsum.photos/300/200?random=6" alt="Thumbnail 5" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-filter duration-300">
</div>
<div class="aspect-video bg-[#A0522D] dark:bg-[#2C3E50] overflow-hidden border-2 border-[#333333] dark:border-[#FFD700] cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 shadow-[3px_3px_0px_0px_#333333] dark:shadow-[3px_3px_0px_0px_#FFD700] hidden lg:block">
<img src="https://picsum.photos/300/200?random=7" alt="Thumbnail 6" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-filter duration-300">
</div>
<div class="aspect-video bg-[#A0522D] dark:bg-[#2C3E50] overflow-hidden border-2 border-[#333333] dark:border-[#FFD700] cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 shadow-[3px_3px_0px_0px_#333333] dark:shadow-[3px_3px_0px_0px_#FFD700] hidden xl:block">
<img src="https://picsum.photos/300/200?random=8" alt="Thumbnail 7" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-filter duration-300">
</div>
<div class="aspect-video bg-[#A0522D] dark:bg-[#2C3E50] overflow-hidden border-2 border-[#333333] dark:border-[#FFD700] cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 shadow-[3px_3px_0px_0px_#333333] dark:shadow-[3px_3px_0px_0px_#FFD700] hidden xl:block">
<img src="https://picsum.photos/300/200?random=9" alt="Thumbnail 8" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-filter duration-300">
</div>
</div>
</div>
<!-- Customer Reviews / Related Products (Bottom Strip) -->
<div class="col-span-1 md:col-span-3 lg:col-span-4 p-4 md:p-6 lg:p-8 border-t-4 border-[#8B0000] dark:border-[#FFD700] bg-[#ECC9A3] dark:bg-[#4A636F]">
<h4 class="text-lg font-bold uppercase mb-4 text-[#8B0000] dark:text-[#FFD700]">// CUSTOMER OVERVIEW</h4>
<div class="flex flex-col sm:flex-row items-center sm:items-start space-y-4 sm:space-y-0 sm:space-x-8">
<div class="flex-shrink-0">
<img src="https://randomuser.me/api/portraits/men/7.jpg" alt="Customer Avatar" class="w-24 h-24 rounded-full border-4 border-[#333333] dark:border-[#FFD700] shadow-[3px_3px_0px_0px_#333333] dark:shadow-[3px_3px_0px_0px_#FFD700]">
</div>
<div class="flex-grow text-center sm:text-left">
<p class="text-xl font-bold text-[#A0522D] dark:text-[#FF9900] mb-2">"Absolutely RAW Power!"</p>
<p class="text-base text-[#333333] dark:text-[#E0E0E0] mb-2">This Gizmo XL exceeded all my expectations. The brutalist design is a refreshing change, and its functionality is unmatched. Highly recommend for any serious collector.</p>
<p class="text-sm text-[#666666] dark:text-[#999999]">- <span class="font-bold">J. DOE</span>, Verified Purchaser</p>
</div>
</div>
<div class="mt-6 text-center">
<button class="px-6 py-2 bg-[#333333] text-[#F0E6D2] dark:bg-[#1E272C] dark:text-[#FFD700] text-sm font-bold uppercase border-2 border-[#F0E6D2] dark:border-[#FFD700] hover:bg-[#555555] dark:hover:bg-[#334455] shadow-[3px_3px_0px_0px_#8B0000] dark:shadow-[3px_3px_0px_0px_#FFD700]">
READ ALL REVIEWS
</button>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant d’intégration de média
Un composant d’intégration multimédia simple et réactif avec un design glassmorphism, une palette de couleurs pastel et une prise en charge du mode sombre, adapté à la consommation de blogs et de contenu.
Composant d’intégration de média rétro
Un composant multimédia réactif avec un design « Rétro/Vintage », inspiré de l’esthétique des années 80/90 comme les vieux moniteurs CRT et les lecteurs magnétoscopes. Il utilise une palette de couleurs complémentaires de sarcelle et d’orange sur une base gris ardoise, adaptée aux sites Web « Business/Corporate ». Le composant présente une complexité modérée avec des effets de survol sur le bouton de lecture et la vignette multimédia, une fausse animation lumineuse REC et des éléments de contrôle décoratifs non fonctionnels. Il inclut la prise en charge du thème sombre à l’aide du préfixe 'dark :' de Tailwind. La zone multimédia est conçue pour un rapport d’aspect de 16:9 (nécessite le plugin de rapport d’aspect Tailwind ou une solution de repli CSS comme l’astuce du rembourrage inférieur). L’image de remplacement de picsum.photos est utilisée.
Composant d’intégration de média
Un composant d’intégration multimédia réactif doté d’une esthétique rétro/vintage, prenant en charge le thème sombre et présentant des images et des avatars de remplacement.