레트로 모노크롬 제품 그리드
심플한 반응형 레트로/빈티지 전자상거래 제품 그리드 구성 요소로, 어두운 테마를 지원하는 단색 바이올렛 팔레트로 스타일링되었습니다. 80/90년대의 향수를 불러일으키는 디자인은 기본적인 레이아웃과 최소한의 요소로 온라인 쇼핑 경험에 적합합니다.
HTML 코드
<!-- Retro Monochromatic E-Commerce Product Grid -->
<div class="container mx-auto p-4">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Product Card 1 -->
<div class="bg-violet-100 dark:bg-violet-900 p-4 rounded-lg border-2 border-violet-900 dark:border-violet-100 shadow-md">
<img src="https://picsum.photos/seed/p1/300/200" alt="Retro T-Shirt" class="w-full h-48 object-cover rounded mb-4 border-2 border-violet-900 dark:border-violet-100">
<h2 class="text-xl font-bold text-violet-900 dark:text-violet-100 mb-2">Retro T-Shirt</h2>
<p class="text-lg text-violet-900 dark:text-violet-100 mb-4">$29.99</p>
<button class="w-full py-2 bg-violet-900 text-violet-100 rounded hover:bg-violet-700 transition">Add to Cart</button>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Seller Avatar" class="w-8 h-8 rounded-full border-2 border-violet-900 dark:border-violet-100 mr-2">
<span class="text-sm text-violet-900 dark:text-violet-100">VintageCo</span>
</div>
</div>
<!-- Product Card 2 -->
<div class="bg-violet-100 dark:bg-violet-900 p-4 rounded-lg border-2 border-violet-900 dark:border-violet-100 shadow-md">
<img src="https://picsum.photos/seed/p2/300/200" alt="Vintage Camera" class="w-full h-48 object-cover rounded mb-4 border-2 border-violet-900 dark:border-violet-100">
<h2 class="text-xl font-bold text-violet-900 dark:text-violet-100 mb-2">Vintage Camera</h2>
<p class="text-lg text-violet-900 dark:text-violet-100 mb-4">$149.00</p>
<button class="w-full py-2 bg-violet-900 text-violet-100 rounded hover:bg-violet-700 transition">Add to Cart</button>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/lego/2.jpg" alt="Seller Avatar" class="w-8 h-8 rounded-full border-2 border-violet-900 dark:border-violet-100 mr-2">
<span class="text-sm text-violet-900 dark:text-violet-100">90sShop</span>
</div>
</div>
<!-- Product Card 3 -->
<div class="bg-violet-100 dark:bg-violet-900 p-4 rounded-lg border-2 border-violet-900 dark:border-violet-100 shadow-md">
<img src="https://picsum.photos/seed/p3/300/200" alt="Cassette Player" class="w-full h-48 object-cover rounded mb-4 border-2 border-violet-900 dark:border-violet-100">
<h2 class="text-xl font-bold text-violet-900 dark:text-violet-100 mb-2">Cassette Player</h2>
<p class="text-lg text-violet-900 dark:text-violet-100 mb-4">$49.50</p>
<button class="w-full py-2 bg-violet-900 text-violet-100 rounded hover:bg-violet-700 transition">Add to Cart</button>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/lego/3.jpg" alt="Seller Avatar" class="w-8 h-8 rounded-full border-2 border-violet-900 dark:border-violet-100 mr-2">
<span class="text-sm text-violet-900 dark:text-violet-100">RetroWave</span>
</div>
</div>
</div>
</div>