CCHub Logo CCHub Tailwind Collection
구성 요소 미디어 구성 요소 Simple Neumorphism E-commerce 미디어 구성 요소

Simple Neumorphism E-commerce 미디어 구성 요소

흙색, 단순한 복잡성, 전자 상거래 사이트용, 반응형 디자인 및 어두운 테마 지원이 있는 뉴모피즘 스타일의 미디어 구성 요소. 이미지에 picsum.photos를 사용합니다.

미리 보기

HTML 코드 

<div class="p-4 max-w-sm mx-auto bg-gray-200 rounded-xl shadow-lg space-y-4 dark:bg-gray-800">
  <div class="relative">
    <img class="w-full h-48 object-cover rounded-md shadow-md" src="https://picsum.photos/seed/picsum/400/300" alt="Product image">
    <button class="absolute top-2 right-2 bg-white text-gray-800 dark:bg-gray-700 dark:text-gray-200 p-1 rounded-full shadow-md">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>
  <div class="text-center">
    <div class="text-lg font-medium text-black dark:text-white">Product Title</div>
    <p class="text-gray-500 dark:text-gray-400">$19.99</p>
  </div>
  <div class="flex justify-center">
    <button class="px-4 py-2 bg-gray-300 text-gray-800 text-base font-semibold rounded-lg shadow-md hover:bg-gray-400 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600">
      Add to Cart
    </button>
  </div>
</div>

관련 구성 요소

스큐어모피즘 미디어 컴포넌트

스큐어모피즘에서 영감을 받은 미디어 컴포넌트는 단색 색 구성표와 복잡한 복잡성 수준을 사용하여 블로그/콘텐츠 목적에 맞게 조정되었습니다. 기능에는 반응형 디자인과 JavaScript 없이 어두운 테마 지원이 포함됩니다.

열다

예술적 사진 미디어 구성 요소

사진 포트폴리오를 위한 복잡하고 반응이 빠른 미디어 구성 요소로, 수채화/예술적 디자인 스타일과 레트로/빈티지 색상 팔레트를 특징으로 합니다. 여러 대화형 요소와 완전한 다크 모드 지원이 포함됩니다.

열다

Memphis_Media_Component_Educational

교육 플랫폼을 위한 반응형 미디어 구성 요소로, 대담한 색상, 기하학적 모양, 네온/일렉트릭 색상 구성표를 사용하여 멤피스 스타일의 미학으로 디자인되었습니다. 다크 모드를 지원합니다.

열다