E-commerce Retro 구성 요소
레트로/빈티지 스타일로 디자인된 복잡한 전자 상거래 구성 요소로, 트라이어드 색 구성표와 반응형 디자인을 특징으로 하며 다크 모드를 지원하는 비즈니스/기업 웹사이트에 적합합니다.
HTML 코드
<div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-lg shadow-lg">
<div class="mb-4">
<h2 class="text-3xl font-bold text-center text-red-600 dark:text-red-400">Vintage E-commerce Store</h2>
<p class="text-center text-lg text-gray-700 dark:text-gray-300">Explore our curated collection of retro-inspired products</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow hover:shadow-md transition-shadow duration-300">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=1" alt="Product 1">
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Retro Gadget</h3>
<p class="text-gray-600 dark:text-gray-400">Classic retro gadget from the 90s, perfect for nostalgia lovers!</p>
<span class="block text-lg font-bold text-red-600 dark:text-red-400">$29.99</span>
<button class="mt-2 w-full bg-red-600 dark:bg-red-400 text-white font-semibold py-2 rounded hover:bg-red-500 dark:hover:bg-red-300 transition">Add to Cart</button>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow hover:shadow-md transition-shadow duration-300">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=2" alt="Product 2">
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Vintage Vinyl</h3>
<p class="text-gray-600 dark:text-gray-400">Experience music like it's the 80s with our vintage vinyl collection.</p>
<span class="block text-lg font-bold text-red-600 dark:text-red-400">$19.99</span>
<button class="mt-2 w-full bg-red-600 dark:bg-red-400 text-white font-semibold py-2 rounded hover:bg-red-500 dark:hover:bg-red-300 transition">Add to Cart</button>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow hover:shadow-md transition-shadow duration-300">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=3" alt="Product 3">
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Classic Arcade Game</h3>
<p class="text-gray-600 dark:text-gray-400">Relive the golden age of gaming with our classic arcade machines!</p>
<span class="block text-lg font-bold text-red-600 dark:text-red-400">$99.99</span>
<button class="mt-2 w-full bg-red-600 dark:bg-red-400 text-white font-semibold py-2 rounded hover:bg-red-500 dark:hover:bg-red-300 transition">Add to Cart</button>
</div>
</div>
</div>
<div class="mt-8">
<h2 class="text-2xl font-bold text-center text-red-600 dark:text-red-400">Meet Our Team</h2>
<div class="flex flex-wrap justify-center space-x-4 mt-4">
<div class="flex flex-col items-center">
<img class="rounded-full w-24 h-24 shadow" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Team Member 1">
<h4 class="mt-2 text-gray-800 dark:text-gray-200">John Doe</h4>
</div>
<div class="flex flex-col items-center">
<img class="rounded-full w-24 h-24 shadow" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Team Member 2">
<h4 class="mt-2 text-gray-800 dark:text-gray-200">Jane Smith</h4>
</div>
<div class="flex flex-col items-center">
<img class="rounded-full w-24 h-24 shadow" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Team Member 3">
<h4 class="mt-2 text-gray-800 dark:text-gray-200">Bob Johnson</h4>
</div>
</div>
</div>
</div>