콘텐츠 표시 구성 요소
전자 상거래를 위한 간단한 빈티지 스타일의 반응형 콘텐츠 디스플레이 구성 요소로, 단색 색 구성표를 사용하고 다크 모드를 지원합니다.
HTML 코드
<div class="max-w-md mx-auto bg-gray-800 dark:bg-gray-900 rounded-lg overflow-hidden shadow-lg">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/pic1/400/300" alt="Product Image">
<div class="p-6">
<h2 class="text-2xl font-bold text-gray-100 dark:text-gray-200 mb-2">Vintage Product Title</h2>
<p class="text-gray-300 dark:text-gray-400 mb-4">A brief description of the vintage product that evokes nostalgia from the 80s and 90s.</p>
<div class="flex items-center mb-4">
<img class="w-10 h-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div class="text-sm">
<p class="text-gray-100 dark:text-gray-200">Seller Name</p>
<p class="text-gray-500 dark:text-gray-400">Seller Rating: ⭐⭐⭐⭐</p>
</div>
</div>
<span class="text-lg font-semibold text-gray-100 dark:text-gray-200">$29.99</span>
<div class="mt-4">
<button class="w-full bg-gray-600 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:hover:bg-gray-600">Add to Cart</button>
</div>
</div>
</div>관련 구성 요소
Content Display 구성 요소
어두운 테마의 전자 상거래를 위해 스큐어모픽 스타일로 설계된 Content Display Component입니다. 유쾌한 미학을 위해 유사한 색 구성표를 사용하여 최소한의 요소로 제품을 선보입니다.
Content Display Components 컴포넌트
마이크로 인터랙션, 반응형 디자인, 어두운 테마 지원을 갖춘 단순하고 생생한 콘텐츠 표시 구성 요소로, 블로그 및 콘텐츠 소비에 적합합니다. 이미지에는 picsum.photos를 사용하고 아바타에는 randomuser.me 를 사용합니다.