Brutalist_Retro_Media_Embed_E 상거래
전자 상거래를 위한 복잡하고 반응이 빠른 브루탈리즘 스타일의 미디어 임베드 구성 요소로, 고대비, 레트로 색상 팔레트, 다크 모드 지원 및 제품 쇼케이스를 위한 여러 인터랙티브 요소를 제공합니다.
HTML 코드
<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>관련 구성 요소
미디어 임베드 컴포넌트
미니멀하고 평평한 디자인의 미디어 임베드 구성 요소는 비즈니스/기업 웹사이트에 적합한 흙색 색 구성표입니다. Tailwind CSS를 사용하여 반응형 디자인과 어두운 테마를 지원하는 중간 정도의 복잡성 구성 요소입니다. JavaScript는 포함되어 있지 않습니다.
미디어 임베드 컴포넌트
glassmorphism 디자인, 파스텔 색 구성표 및 다크 모드 지원을 갖춘 간단하고 반응이 빠른 미디어 임베드 구성 요소로, 블로그 및 콘텐츠 소비에 적합합니다.