CCHub Logo CCHub Tailwind Collection
구성 요소 전자 상거래 구성 요소 레트로 모노크롬 제품 그리드

레트로 모노크롬 제품 그리드

심플한 반응형 레트로/빈티지 전자상거래 제품 그리드 구성 요소로, 어두운 테마를 지원하는 단색 바이올렛 팔레트로 스타일링되었습니다. 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>

관련 구성 요소

Neumorphic 전자 상거래 제품 카드

비즈니스/기업 웹 사이트를 위해 설계된 회색조 색상의 소프트 UI(Neumorphism) 스타일 전자 상거래 제품 카드 구성 요소입니다. 제품 이미지, 제목, 가격 및 '장바구니에 추가' 버튼이 있으며 완벽하게 반응하고 다크 모드를 지원합니다.

열다

E-commerce Dashboard 구성 요소

스큐어모피즘, 생생한 색상 및 Tailwind CSS를 위한 간단한 레이아웃이 있는 전자 상거래 대시보드 구성 요소, 반응형 및 어두운 테마 지원.

열다

소셜 미디어 전자 상거래 카드

소셜 미디어에 초점을 맞춘 전자 상거래 구성 요소, Glassmorphism 스타일, 단색 색 구성표, 복잡한 레이아웃, 반응형 및 어두운 테마 지원.

열다