전자 상거래 카드
Tailwind CSS 및 머티리얼 디자인 원칙을 사용하여 다크 모드를 지원하는 반응형 전자 상거래 카드 구성 요소. 버튼과 호버 효과와 같은 대화형 요소를 포함하여 중간 정도의 복잡성을 가진 생생한 색 구성표가 특징입니다. 그리드 기반 레이아웃을 사용하고 깊이를 위해 그림자를 통합합니다.
HTML 코드
<div class="dark:bg-gray-800 dark:text-white p-4 rounded-lg shadow-lg grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="relative"> <img class="w-full h-48 object-cover rounded" src="https://picsum.photos/seed/picsum/400/300" alt="Product Image"> <div class="absolute top-2 right-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded"> -20% </div> </div> <div class="flex flex-col justify-between"> <div> <h3 class="text-xl font-bold dark:text-white">Product Title</h3> <p class="text-gray-600 dark:text-gray-300">Short product description with vibrant accents.</p> <div class="flex items-center mt-2"> <span class="text-lg font-semibold text-blue-600 dark:text-blue-400">$19.99</span> <span class="text-sm text-gray-500 line-through ml-2">$24.99</span> </div> </div> <div class="flex space-x-2 mt-4"> <button class="flex-grow bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded dark:bg-blue-700 dark:hover:bg-blue-800"> Add to Cart </button> <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded dark:bg-gray-600 dark:hover:bg-gray-700 dark:text-white"> Wishlist </button> </div> </div> </div>관련 구성 요소
Glassmorphism 카드 구성 요소
생생한 색상의 Glassmorphism 카드 구성 요소. 어두운 테마를 지원하는 반응형 디자인. 이미지에는 picsum.photos를 사용하고 아바타에는 randomuser.me 를 사용합니다.
Industrial_Farming_Cards_Component
농업 및 농업 웹사이트에 적합한 산업, 원자재 미학, 따뜻한 중성 색상 및 다크 모드를 지원하는 반응형 카드 세트입니다. 노출된 요소와 실용적인 디자인이 특징입니다.
Luxury_Portfolio_Cards_Ocean_Blue
복잡한 럭셔리/프리미엄 포트폴리오 카드 구성 요소로, 작품이나 제품을 선보이기 위해 바다/블루 톤으로 디자인되었습니다. 반응형 디자인, 세련된 타이포그래피, 우아한 비주얼, 완전한 다크 모드 지원이 특징입니다.