레트로 전자 상거래 제품 카드 디스플레이
80년대/90년대 레트로/빈티지 미학을 가미한 복잡하고 반응이 빠른 전자 상거래 제품 디스플레이 구성 요소로, 보라색/보라색 색 구성표, 대화형 요소 및 다크 모드 지원을 특징으로 합니다.
HTML 코드
<div class="font-mono min-h-screen bg-gradient-to-br from-purple-100 via-pink-100 to-indigo-100 text-purple-800 dark:from-purple-900 dark:via-blue-900 dark:to-indigo-900 dark:selection:bg-cyan-400 dark:text-purple-100 p-4 sm:p-8 flex items-center justify-center">
<div class="container mx-auto p-4 sm:p-8 bg-purple-200 dark:bg-purple-800 rounded-lg shadow-2xl border-4 border-indigo-500 dark:border-indigo-400 transform skew-y-1 shadow-purple-500/50 dark:shadow-purple-900/50">
<div class="mb-8 text-center -skew-y-1">
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold mb-2 text-indigo-700 dark:text-indigo-300 tracking-wider uppercase drop-shadow-lg [text-shadow:_4px_4px_rgb(109_40_217_/_50%)] dark:[text-shadow:_4px_4px_rgb(99_102_241_/_30%)]">
80s VIBE SHOP
</h1>
<p class="text-xl sm:text-2xl text-purple-600 dark:text-purple-300 font-semibold mb-6 italic">Unbox the Future, One Pixel at a Time</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Product Card 1 -->
<div class="bg-purple-300 dark:bg-purple-700 rounded-lg p-6 shadow-xl border-4 border-indigo-400 dark:border-indigo-500 relative overflow-hidden transform hover:scale-105 transition-transform duration-300 cube-effect">
<div class="absolute inset-0 bg-gradient-to-br from-indigo-400/30 to-purple-400/30 dark:from-indigo-600/30 dark:to-purple-600/30 opacity-0 hover:opacity-100 transition-opacity duration-300 flex items-center justify-center text-white text-3xl font-bold cursor-pointer z-10">
<span class="animate-pulse">BUY NOW!</span>
</div>
<div class="relative z-20">
<div class="mb-4 overflow-hidden rounded-md border-2 border-purple-500 dark:border-purple-300 group-hover:filter group-hover:brightness-110">
<img src="https://picsum.photos/id/1043/400/300" alt="Product Image" class="w-full h-48 object-cover rounded-md transform transition-transform duration-300 hover:scale-110 pulse-glow">
</div>
<h2 class="text-2xl font-bold text-indigo-700 dark:text-indigo-300 mb-2 truncate">RETRO GAMER DX</h2>
<p class="text-purple-700 dark:text-purple-200 mb-4 line-clamp-3">Experience the thrill of classic gaming with this reimagined retro console! Comes with 100+ pre-installed games. Limited Edition purple variant!</p>
<div class="flex justify-between items-center mb-4">
<span class="text-3xl font-extrabold text-pink-600 dark:text-pink-400 drop-shadow-md">$89.99</span>
<div class="flex items-center space-x-1 text-yellow-500 dark:text-yellow-400">
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-5 h-5 fill-current text-gray-400 dark:text-gray-600" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
</div>
</div>
<div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2">
<button class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-4 rounded-md focus:outline-none focus:shadow-outline transform hover:scale-105 duration-200 shadow-lg shadow-indigo-500/50 dark:shadow-indigo-700/50 btn-glow">
Add to Cart
</button>
<button class="flex-1 bg-purple-500 hover:bg-purple-600 text-white font-bold py-3 px-4 rounded-md focus:outline-none focus:shadow-outline transform hover:scale-105 duration-200 shadow-lg shadow-purple-500/50 dark:shadow-purple-700/50 btn-glow">
Details
</button>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="bg-purple-300 dark:bg-purple-700 rounded-lg p-6 shadow-xl border-4 border-indigo-400 dark:border-indigo-500 relative overflow-hidden transform hover:scale-105 transition-transform duration-300 cube-effect">
<div class="absolute inset-0 bg-gradient-to-br from-indigo-400/30 to-purple-400/30 dark:from-indigo-600/30 dark:to-purple-600/30 opacity-0 hover:opacity-100 transition-opacity duration-300 flex items-center justify-center text-white text-3xl font-bold cursor-pointer z-10">
<span class="animate-pulse">BUY NOW!</span>
</div>
<div class="relative z-20">
<div class="mb-4 overflow-hidden rounded-md border-2 border-purple-500 dark:border-purple-300">
<img src="https://picsum.photos/id/338/400/300" alt="Product Image" class="w-full h-48 object-cover rounded-md transform transition-transform duration-300 hover:scale-110 pulse-glow">
</div>
<h2 class="text-2xl font-bold text-indigo-700 dark:text-indigo-300 mb-2 truncate">CYBERPUNK HEADPHONES</h2>
<p class="text-purple-700 dark:text-purple-200 mb-4 line-clamp-3">Immerse yourself in a world of pure sound. Neon light accents, booming bass, and comfortable earcups for all-day listening.</p>
<div class="flex justify-between items-center mb-4">
<span class="text-3xl font-extrabold text-pink-600 dark:text-pink-400 drop-shadow-md">$129.00</span>
<div class="flex items-center space-x-1 text-yellow-500 dark:text-yellow-400">
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-5 h-5 fill-current text-yellow-500 dark:text-yellow-400 opacity-50" viewBox="0 0 24 24"><path d="M12 0l-3.09 6.26-6.91.99 5 4.88-1.18 6.91L12 18.23l6.23 3.28-1.18-6.91 5-4.88-6.91-.99L12 0z"/></svg>
</div>
</div>
<div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2">
<button class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-4 rounded-md focus:outline-none focus:shadow-outline transform hover:scale-105 duration-200 shadow-lg shadow-indigo-500/50 dark:shadow-indigo-700/50 btn-glow">
Add to Cart
</button>
<button class="flex-1 bg-purple-500 hover:bg-purple-600 text-white font-bold py-3 px-4 rounded-md focus:outline-none focus:shadow-outline transform hover:scale-105 duration-200 shadow-lg shadow-purple-500/50 dark:shadow-purple-700/50 btn-glow">
Details
</button>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="bg-purple-300 dark:bg-purple-700 rounded-lg p-6 shadow-xl border-4 border-indigo-400 dark:border-indigo-500 relative overflow-hidden transform hover:scale-105 transition-transform duration-300 cube-effect">
<div class="absolute inset-0 bg-gradient-to-br from-indigo-400/30 to-purple-400/30 dark:from-indigo-600/30 dark:to-purple-600/30 opacity-0 hover:opacity-100 transition-opacity duration-300 flex items-center justify-center text-white text-3xl font-bold cursor-pointer z-10">
<span class="animate-pulse">BUY NOW!</span>
</div>
<div class="relative z-20">
<div class="mb-4 overflow-hidden rounded-md border-2 border-purple-500 dark:border-purple-300">
<img src="https://picsum.photos/id/296/400/300" alt="Product Image" class="w-full h-48 object-cover rounded-md transform transition-transform duration-300 hover:scale-110 pulse-glow">
</div>
<h2 class="text-2xl font-bold text-indigo-700 dark:text-indigo-300 mb-2 truncate">NEON CITY POSTER</h2>
<p class="text-purple-700 dark:text-purple-200 mb-4 line-clamp-3">Illuminate your living space with this vibrant, high-quality art print. Featuring a quintessential 80s cityscape at dusk.</p>
<div class="flex justify-between items-center mb-4">
<span class="text-3xl font-extrabold text-pink-600 dark:text-pink-400 drop-shadow-md">$29.50</span>
<div class="flex items-center space-x-1 text-yellow-500 dark:text-yellow-400">
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-5 h-5 fill-current text-gray-400 dark:text-gray-600" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-5 h-5 fill-current text-gray-400 dark:text-gray-600" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
</div>
</div>
<div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2">
<button class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-4 rounded-md focus:outline-none focus:shadow-outline transform hover:scale-105 duration-200 shadow-lg shadow-indigo-500/50 dark:shadow-indigo-700/50 btn-glow">
Add to Cart
</button>
<button class="flex-1 bg-purple-500 hover:bg-purple-600 text-white font-bold py-3 px-4 rounded-md focus:outline-none focus:shadow-outline transform hover:scale-105 duration-200 shadow-lg shadow-purple-500/50 dark:shadow-purple-700/50 btn-glow">
Details
</button>
</div>
</div>
</div>
</div>
<div class="mt-12 text-center -skew-y-1">
<p class="text-lg sm:text-xl text-purple-600 dark:text-purple-300 font-semibold italic">Ready to step back into the future?</p>
<button class="mt-4 inline-block bg-pink-500 hover:bg-pink-600 text-white font-bold py-3 px-8 rounded-full shadow-lg shadow-pink-500/50 dark:shadow-pink-700/50 uppercase tracking-wide transform hover:scale-105 duration-300 focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-700 btn-glow">
Browse All Products
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block ml-2 -mt-1" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
<path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
</button>
</div>
<!-- Decorative elements -->
<div class="absolute top-4 left-4 w-12 h-12 bg-pink-400 dark:bg-pink-600 rounded-full animate-bounce" style="animation-duration: 3s; animation-delay: 0s;"></div>
<div class="absolute bottom-4 right-4 w-8 h-8 bg-indigo-400 dark:bg-indigo-600 rounded-full animate-bounce" style="animation-duration: 3s; animation-delay: 1.5s;"></div>
<div class="absolute top-1/4 right-1/4 w-6 h-6 bg-purple-500 dark:bg-purple-400 rounded-xl transform rotate-45 animate-spin-slow"></div>
<div class="absolute bottom-1/3 left-1/4 w-10 h-10 bg-cyan-400 dark:bg-cyan-600 rounded-lg transform skew-x-12 animate-float"></div>
</div>
</div>
<style>
/* Adding some custom keyframe animations for retro feel */
@keyframes pulse-glow {
0%, 100% { box-shadow: 0 0 0px rgba(255, 255, 255, 0); }
50% { box-shadow: 0 0 15px rgba(236, 72, 153, 0.7), 0 0 30px rgba(168, 85, 247, 0.5); }
}
.pulse-glow {
animation: pulse-glow 3s infinite alternate;
}
@keyframes btn-glow {
0%, 100% { outline: 2px solid transparent; }
50% { outline: 2px solid theme('colors.purple.400'); outline-offset: 2px; }
}
.btn-glow:hover {
animation: btn-glow 1s infinite alternate;
}
@keyframes cube-effect {
0% { transform: scale(1) rotate(0deg); }
25% { transform: scale(1.01) rotate(0.5deg); }
50% { transform: scale(1) rotate(0deg); }
75% { transform: scale(1.01) rotate(-0.5deg); }
100% { transform: scale(1) rotate(0deg); }
}
.cube-effect {
box-shadow: 8px 8px 0px theme('colors.indigo.500'), 16px 16px 0px theme('colors.pink.500');
transition: all 0.3s ease-in-out;
}
.dark .cube-effect {
box-shadow: 8px 8px 0px theme('colors.indigo.700'), 16px 16px 0px theme('colors.pink.700');
}
.cube-effect:hover {
transform: translate(-4px, -4px) scale(1.02);
box-shadow: 10px 10px 0px theme('colors.indigo.600'), 20px 20px 0px theme('colors.pink.600');
}
.dark .cube-effect:hover {
box-shadow: 10px 10px 0px theme('colors.indigo.800'), 20px 20px 0px theme('colors.pink.800');
}
@keyframes spin-slow {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.animate-spin-slow {
animation: spin-slow 10s linear infinite;
}
@keyframes float {
0% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-10px) rotate(5deg); }
100% { transform: translateY(0px) rotate(0deg); }
}
.animate-float {
animation: float 4s ease-in-out infinite;
}
</style>관련 구성 요소
Swiss_International_Typography_Content_Display_Component
대시보드를 위한 깨끗하고 미니멀한 콘텐츠 디스플레이 구성 요소로, 멋진 무채색과 완전한 응답성으로 타이포그래피와 그리드 시스템을 강조합니다.
머티리얼 디자인 트라이어딕 대시보드 카드
Material Design 미학을 갖춘 간단하고 반응이 빠른 대시보드 콘텐츠 표시 구성 요소로, 트라이어딕 색 구성표와 다크 모드 지원을 사용합니다. 주요 메트릭 또는 정보를 표시하는 데 적합합니다.