컨테이너 구성 요소
전자 상거래를 위한 브루탈리즘 스타일로 설계된 컨테이너 구성 요소로, Tailwind CSS를 사용하여 어두운 테마를 지원하는 반응형 레이아웃을 특징으로 합니다.
HTML 코드
<div class="flex flex-col bg-gray-800 p-4 rounded-lg dark:bg-gray-900">
<header class="text-white text-2xl font-bold mb-4">E-commerce Store</header>
<div class="flex flex-wrap gap-4">
<div class="flex flex-col bg-gray-700 p-4 rounded-md dark:bg-gray-800 w-full md:w-1/3">
<img src="https://picsum.photos/200/300" alt="Product Image" class="mb-2 rounded-md">
<h2 class="text-lg font-bold text-yellow-300">Product Title 1</h2>
<p class="text-white">This is a brief description of the product. It's bold and raw.</p>
<button class="mt-2 bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-2 px-4 rounded">Add to Cart</button>
</div>
<div class="flex flex-col bg-gray-700 p-4 rounded-md dark:bg-gray-800 w-full md:w-1/3">
<img src="https://picsum.photos/200/301" alt="Product Image" class="mb-2 rounded-md">
<h2 class="text-lg font-bold text-yellow-300">Product Title 2</h2>
<p class="text-white">This is a brief description of the product. It's bold and raw.</p>
<button class="mt-2 bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-2 px-4 rounded">Add to Cart</button>
</div>
<div class="flex flex-col bg-gray-700 p-4 rounded-md dark:bg-gray-800 w-full md:w-1/3">
<img src="https://picsum.photos/200/302" alt="Product Image" class="mb-2 rounded-md">
<h2 class="text-lg font-bold text-yellow-300">Product Title 3</h2>
<p class="text-white">This is a brief description of the product. It's bold and raw.</p>
<button class="mt-2 bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
<footer class="text-center mt-4 text-gray-400">
<p>© 2023 E-commerce Store</p>
</footer>
</div>관련 구성 요소
머티리얼 디자인 전자 상거래 컨테이너
제품 그리드, 장바구니 요약 및 어두운 테마 지원을 갖춘 반응형 전자 상거래 컨테이너 구성 요소로, 머티리얼 디자인 원칙과 어스 톤 색 구성표를 사용하여 설계되었습니다. 이미지, 제목, 가격, "장바구니에 추가" 버튼이 있는 제품 카드, 추가된 항목으로 업데이트되는 끈적한 장바구니 요약을 포함한 여러 대화형 요소가 있습니다. 레이아웃은 다양한 화면 크기에 맞게 조정되며 모든 요소에는 Tailwind CSS dark: 접두사로 정의된 어두운 모드 스타일이 있습니다.
부동산 리스팅 카드 - 수채화/네온
수채화/예술적 부드러운 배경과 네온/일렉트릭 컬러 구성표가 있는 복잡한 부동산 리스팅 카드입니다. 부동산 세부 정보, 에이전트 정보 및 가격을 제공하며 완전한 응답성과 다크 모드를 지원합니다.