사이버펑크 제품 갤러리
사이버펑크 미학을 가미한 반응형 제품 갤러리 구성 요소로, 어두운 배경, 밝은 액센트 색상(일렉트릭 블루) 및 미묘한 인터랙티브 요소를 특징으로 하며, 제품 또는 포트폴리오를 선보이는 데 적합합니다.
HTML 코드
<div class="font-sans antialiased bg-gray-950 text-gray-100 dark:bg-black p-4 sm:p-6 lg:p-8">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-white text-center mb-12 sm:mb-16 tracking-tight animate-pulse-light">
<span class="block text-blue-400 drop-shadow-neon-blue">CYBERPUNK</span> GALLERY
</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 lg:gap-10">
<!-- Product Card 1 -->
<div class="relative group overflow-hidden rounded-lg shadow-lg bg-gray-900 border border-blue-600/50 hover:border-blue-400 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01] dark:bg-gray-900">
<img src="https://picsum.photos/id/237/800/600" alt="Product Image 1" class="w-full h-56 sm:h-64 object-cover object-center transform group-hover:scale-105 transition-transform duration-500 ease-in-out border-b border-blue-600/30">
<div class="p-5 sm:p-6">
<h3 class="text-2xl font-bold text-white mb-2 drop-shadow-text-neon-blue">Quantum Holo-Display</h3>
<p class="text-gray-300 text-sm mb-4 leading-relaxed">Sleek, transparent interface with augmented reality overlays for the ultimate digital experience.</p>
<div class="flex items-center justify-between mt-auto">
<span class="text-blue-400 font-bold text-xl drop-shadow-md">€1,299.99</span>
<button class="px-5 py-2 bg-blue-600 text-white font-semibold rounded-md shadow-lg transform hover:scale-105 active:scale-95 transition-all duration-200 ease-in-out border border-blue-700 hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
View Details
</button>
</div>
</div>
<div class="absolute inset-0 border border-blue-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-lg"></div>
</div>
<!-- Product Card 2 -->
<div class="relative group overflow-hidden rounded-lg shadow-lg bg-gray-900 border border-blue-600/50 hover:border-blue-400 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01] dark:bg-gray-900">
<img src="https://picsum.photos/id/238/800/600" alt="Product Image 2" class="w-full h-56 sm:h-64 object-cover object-center transform group-hover:scale-105 transition-transform duration-500 ease-in-out border-b border-blue-600/30">
<div class="p-5 sm:p-6">
<h3 class="text-2xl font-bold text-white mb-2 drop-shadow-text-neon-blue">Neural Interface Chip</h3>
<p class="text-gray-300 text-sm mb-4 leading-relaxed">Direct brain-computer connection, enhancing perception and processing speed exponentially.</p>
<div class="flex items-center justify-between mt-auto">
<span class="text-blue-400 font-bold text-xl drop-shadow-md">€899.99</span>
<button class="px-5 py-2 bg-blue-600 text-white font-semibold rounded-md shadow-lg transform hover:scale-105 active:scale-95 transition-all duration-200 ease-in-out border border-blue-700 hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
View Details
</button>
</div>
</div>
<div class="absolute inset-0 border border-blue-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-lg"></div>
</div>
<!-- Product Card 3 -->
<div class="relative group overflow-hidden rounded-lg shadow-lg bg-gray-900 border border-blue-600/50 hover:border-blue-400 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01] dark:bg-gray-900">
<img src="https://picsum.photos/id/239/800/600" alt="Product Image 3" class="w-full h-56 sm:h-64 object-cover object-center transform group-hover:scale-105 transition-transform duration-500 ease-in-out border-b border-blue-600/30">
<div class="p-5 sm:p-6">
<h3 class="text-2xl font-bold text-white mb-2 drop-shadow-text-neon-blue">Aero-Motorcycle X-7</h3>
<p class="text-gray-300 text-sm mb-4 leading-relaxed">Zero-emission hoverbike capable of reaching incredible speeds in urban environments.</p>
<div class="flex items-center justify-between mt-auto">
<span class="text-blue-400 font-bold text-xl drop-shadow-md">€5,499.00</span>
<button class="px-5 py-2 bg-blue-600 text-white font-semibold rounded-md shadow-lg transform hover:scale-105 active:scale-95 transition-all duration-200 ease-in-out border border-blue-700 hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
View Details
</button>
</div>
</div>
<div class="absolute inset-0 border border-blue-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-lg"></div>
</div>
<!-- Product Card 4 -->
<div class="relative group overflow-hidden rounded-lg shadow-lg bg-gray-900 border border-blue-600/50 hover:border-blue-400 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01] dark:bg-gray-900">
<img src="https://picsum.photos/id/240/800/600" alt="Product Image 4" class="w-full h-56 sm:h-64 object-cover object-center transform group-hover:scale-105 transition-transform duration-500 ease-in-out border-b border-blue-600/30">
<div class="p-5 sm:p-6">
<h3 class="text-2xl font-bold text-white mb-2 drop-shadow-text-neon-blue">Exo-Suit Mk-II</h3>
<p class="text-gray-300 text-sm mb-4 leading-relaxed">Reinforced personal armor with integrated life support and tactical heads-up display.</p>
<div class="flex items-center justify-between mt-auto">
<span class="text-blue-400 font-bold text-xl drop-shadow-md">€7,850.00</span>
<button class="px-5 py-2 bg-blue-600 text-white font-semibold rounded-md shadow-lg transform hover:scale-105 active:scale-95 transition-all duration-200 ease-in-out border border-blue-700 hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
View Details
</button>
</div>
</div>
<div class="absolute inset-0 border border-blue-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-lg"></div>
</div>
<!-- Product Card 5 -->
<div class="relative group overflow-hidden rounded-lg shadow-lg bg-gray-900 border border-blue-600/50 hover:border-blue-400 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01] dark:bg-gray-900">
<img src="https://picsum.photos/id/241/800/600" alt="Product Image 5" class="w-full h-56 sm:h-64 object-cover object-center transform group-hover:scale-105 transition-transform duration-500 ease-in-out border-b border-blue-600/30">
<div class="p-5 sm:p-6">
<h3 class="text-2xl font-bold text-white mb-2 drop-shadow-text-neon-blue">Cyber-Optic Lenses</h3>
<p class="text-gray-300 text-sm mb-4 leading-relaxed">Enhanced vision with zoom, night vision, and detailed data overlay capabilities.</p>
<div class="flex items-center justify-between mt-auto">
<span class="text-blue-400 font-bold text-xl drop-shadow-md">€450.00</span>
<button class="px-5 py-2 bg-blue-600 text-white font-semibold rounded-md shadow-lg transform hover:scale-105 active:scale-95 transition-all duration-200 ease-in-out border border-blue-700 hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
View Details
</button>
</div>
</div>
<div class="absolute inset-0 border border-blue-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-lg"></div>
</div>
<!-- Product Card 6 -->
<div class="relative group overflow-hidden rounded-lg shadow-lg bg-gray-900 border border-blue-600/50 hover:border-blue-400 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01] dark:bg-gray-900">
<img src="https://picsum.photos/id/242/800/600" alt="Product Image 6" class="w-full h-56 sm:h-64 object-cover object-center transform group-hover:scale-105 transition-transform duration-500 ease-in-out border-b border-blue-600/30">
<div class="p-5 sm:p-6">
<h3 class="text-2xl font-bold text-white mb-2 drop-shadow-text-neon-blue">Logic Processor Unit</h3>
<p class="text-gray-300 text-sm mb-4 leading-relaxed">Compact and powerful portable computing device for on-the-go data manipulation.</p>
<div class="flex items-center justify-between mt-auto">
<span class="text-blue-400 font-bold text-xl drop-shadow-md">€620.00</span>
<button class="px-5 py-2 bg-blue-600 text-white font-semibold rounded-md shadow-lg transform hover:scale-105 active:scale-95 transition-all duration-200 ease-in-out border border-blue-700 hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
View Details
</button>
</div>
</div>
<div class="absolute inset-0 border border-blue-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-lg"></div>
</div>
</div>
</div>
<!-- Custom Styles for Neon Glow -->
<style>
.drop-shadow-neon-blue {
text-shadow: 0 0 5px rgba(66, 153, 225, 0.6), 0 0 10px rgba(66, 153, 225, 0.4), 0 0 15px rgba(66, 153, 225, 0.2);
}
.drop-shadow-text-neon-blue {
text-shadow: 0 0 2px rgba(66, 153, 225, 0.8), 0 0 4px rgba(66, 153, 225, 0.6);
}
@keyframes pulse-light {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.2); }
}
.animate-pulse-light {
animation: pulse-light 3s infinite alternate;
}
</style>
</div>관련 구성 요소
Product Gallery 구성 요소
머티리얼 디자인(Material Design) 미학을 가미한 반응형 제품 갤러리 구성 요소로, 그리드 기반 레이아웃과 제품 또는 포트폴리오를 선보이는 데 적합한 대화형 요소를 특징으로 합니다. 다크 모드 지원이 포함되며 유사한 색 구성표를 사용합니다.
Product Gallery 구성 요소
소셜 미디어에 적합한 파스텔 색 구성표와 함께 잔인함 스타일로 디자인된 반응형 제품 갤러리 구성 요소입니다. 높은 대비, 대담한 디자인 요소가 특징이며 다크 모드에 최적화되어 있습니다.
Product Gallery 구성 요소
종이/인쇄물에서 영감을 받은 디자인, 따뜻한 중성 색상 구성표 및 다크 모드 지원을 갖춘 반응형 제품 갤러리 구성 요소로, 엔터테인먼트/미디어 플랫폼에 적합합니다.