구성 요소 가격 표시 가격 표시 구성 요소

가격 표시 구성 요소

보색 구성표(연한 주황색 및 연한 파란색)를 갖춘 Neumorphism 스타일의 가격 표시 구성 요소로, 전자 상거래를 위한 중간 정도의 복잡성을 제공합니다. 어두운 테마를 지원하는 반응형 디자인이 특징입니다. 구성 요소는 제품 이미지, 제목 및 가격을 '장바구니에 추가' 버튼과 함께 표시합니다. 다크 모드는 채도가 낮은 보색을 사용합니다.

미리 보기

HTML 코드

<div class="p-8 bg-gray-200 dark:bg-gray-800 min-h-screen flex items-center justify-center font-sans">

  <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark max-w-sm mx-auto transition-all duration-300">
    
    <!-- Product Image (Placeholder) -->
    <div class="w-full h-48 bg-gray-300 dark:bg-gray-700 rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark overflow-hidden">
      <img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="w-full h-full object-cover">
    </div>

    <!-- Product Title -->
    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2 truncate">Neumorphic Product Title</h3>
    
    <!-- Product Description (Optional - Uncomment if needed) -->
    <!-- <p class="text-gray-600 dark:text-gray-400 text-sm mb-4 line-clamp-2">This is a brief description of the product, showcasing its features and benefits.</p> -->

    <!-- Price and Add to Cart -->
    <div class="flex items-center justify-between mb-4">
      <span class="text-3xl font-bold text-orange-600 dark:text-orange-400">$129.99</span>
      <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-6 rounded-lg shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark active:shadow-inner-neumorphic-btn-light dark:active:shadow-inner-neumorphic-btn-dark transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
        Add to Cart
      </button>
    </div>

    <!-- Additional Details (Optional) -->
    <div class="grid grid-cols-2 gap-3 text-sm text-gray-700 dark:text-gray-300">
      <div class="p-3 bg-gray-100 dark:bg-gray-700 rounded-md shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
        <p><strong class="text-gray-800 dark:text-gray-200">Category:</strong> Electronics</p>
      </div>
      <div class="p-3 bg-gray-100 dark:bg-gray-700 rounded-md shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
        <p><strong class="text-gray-800 dark:text-gray-200">Availability:</strong> In Stock</p>
      </div>
    </div>

  </div>

  <!-- TailwindCSS Config for Neumorphism Shadows (Add this to your tailwind.config.js) -->
  <div style="display: none;">
    <!-- You would typically add this to your tailwind.config.js file under 'extend' -->
    <pre>
      module.exports = {
        theme: {
          extend: {
            boxShadow: {
              'neumorphic-light': '9px 9px 18px #a1a1a1, -9px -9px 18px #ffffff',
              'neumorphic-dark': '9px 9px 18px #4a4a4a, -9px -9px 18px #1a1a1a',
              'inner-neumorphic-light': 'inset 5px 5px 10px #bdbdbd, inset -5px -5px 10px #ffffff',
              'inner-neumorphic-dark': 'inset 5px 5px 10px #333333, inset -5px -5px 10px #6d6d6d',
              'neumorphic-btn-light': '6px 6px 12px #9a9a9a, -6px -6px 12px #ffffff',
              'neumorphic-btn-dark': '6px 6px 12px #444444, -6px -6px 12px #222222',
              'inner-neumorphic-btn-light': 'inset 3px 3px 6px #8c8c8c, inset -3px -3px 6px #ffffff',
              'inner-neumorphic-btn-dark': 'inset 3px 3px 6px #3b3b3b, inset -3px -3px 6px #5f5f5f',
            }
          }
        }
      }
    </pre>
  </div>

</div>

관련 구성 요소

가격 표시 구성 요소

다크 모드와 반응형 효과를 지원하는 3D 스타일의 가격 표시 구성 요소로, 제품 가격 세부 정보를 보여줍니다.

열다

가격 표시 구성 요소

전자 상거래를 위한 레트로/빈티지 테마의 가격 표시 구성 요소로, 트라이어딕 색 구성표를 특징으로 합니다. Tailwind CSS로 구축된 어두운 테마 지원이 포함된 복잡하고 반응이 빠른 디자인입니다.

열다

사이버펑크 가격 표시 구성 요소

사이버펑크, 미래지향적인 네온 미학을 갖춘 컨설팅/서비스를 위한 반응형 가격 표시 구성 요소입니다. 어두운 배경, 밝은 아날로그 악센트 색상이 특징이며 어두운 모드를 지원합니다.

열다