CCHub Logo CCHub Tailwind Collection
구성 요소 전자 상거래 구성 요소 E-commerce Neumorphism 구성 요소

E-commerce Neumorphism 구성 요소

Tailwind CSS를 사용하여 어두운 테마를 지원하는 Neumorphism 스타일로 설계된 반응형 전자 상거래 구성 요소입니다.

미리 보기

HTML 코드 

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-6">
  <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 w-full max-w-sm">
    <img class="rounded-t-lg mb-4" src="https://picsum.photos/400/200" alt="Product Image" />
    <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Product Title</h2>
    <p class="text-gray-600 dark:text-gray-300 mb-4">Product description goes here. This is a brief overview of the product features and benefits.</p>
    <div class="flex items-center justify-between mb-4">
      <span class="text-gray-800 dark:text-white font-bold text-lg">
        $29.99
      </span>
      <button class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-white rounded-full py-2 px-4 shadow-md hover:shadow-lg active:shadow-sm transition duration-300">
        Add to Cart
      </button>
    </div>
    <div class="flex items-center">
      <img class="rounded-full w-10 h-10 mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
      <span class="text-gray-600 dark:text-gray-300">Seller Name</span>
    </div>
  </div>
</div>

관련 구성 요소

전자 상거래 구성 요소

포트폴리오 쇼케이스를 위해 어스 톤 색상을 사용하는 다크 모드 디자인의 중간 복잡성 전자 상거래 구성 요소입니다.

열다

Industrial_Monochrome_Blog_Card

산업적 미학을 가미한 복잡하고 반응이 빠른 블로그/콘텐츠 소비 카드로, 하나의 밝은 액센트가 있는 흑백 색 구성표를 사용합니다. 노출된 요소와 실용적인 디자인이 특징이며 다크 모드를 지원합니다.

열다

Neumorphic 전자 상거래 제품 카드

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

열다