E-commerce 레이아웃 구성 요소
회색조 머티리얼 디자인 미학을 갖춘 단순하고 반응이 빠른 전자상거래 레이아웃 구성 요소로, 제품 그리드, 머리글 및 바닥글이 특징이며 모두 다크 모드를 지원합니다. 제품 이미지에 picsum.photos를 사용합니다.
HTML 코드
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col">
<!-- Header -->
<header class="bg-white dark:bg-gray-800 shadow">
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
<h1 class="text-2xl font-bold text-gray-800 dark:text-white">E-Commerce Store</h1>
<nav class="hidden md:block">
<ul class="flex space-x-4">
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Home</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Products</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">About</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Contact</a></li>
</ul>
</nav>
<div class="md:hidden">
<button class="text-gray-600 dark:text-gray-300 focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
</button>
</div>
</div>
</header>
<!-- Main Content -->
<main class="container mx-auto px-4 py-8 flex-grow">
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<!-- Product Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/seed/product1/400/300" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 1</h3>
<p class="text-gray-600 dark:text-gray-300 mt-2">$49.99</p>
<button class="mt-4 bg-gray-800 dark:bg-gray-700 text-white py-2 px-4 rounded-md hover:bg-gray-700 dark:hover:bg-gray-600">Add to Cart</button>
</div>
</div>
<!-- Product Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/seed/product2/400/300" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 2</h3>
<p class="text-gray-600 dark:text-gray-300 mt-2">$29.99</p>
<button class="mt-4 bg-gray-800 dark:bg-gray-700 text-white py-2 px-4 rounded-md hover:bg-gray-700 dark:hover:bg-gray-600">Add to Cart</button>
</div>
</div>
<!-- Product Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/seed/product3/400/300" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 3</h3>
<p class="text-gray-600 dark:text-gray-300 mt-2">$79.99</p>
<button class="mt-4 bg-gray-800 dark:bg-gray-700 text-white py-2 px-4 rounded-md hover:bg-gray-700 dark:hover:bg-gray-600">Add to Cart</button>
</div>
</div>
<!-- Product Card 4 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/seed/product4/400/300" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 4</h3>
<p class="text-gray-600 dark:text-gray-300 mt-2">$19.99</p>
<button class="mt-4 bg-gray-800 dark:bg-gray-700 text-white py-2 px-4 rounded-md hover:bg-gray-700 dark:hover:bg-gray-600">Add to Cart</button>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="bg-white dark:bg-gray-800 shadow mt-8">
<div class="container mx-auto px-4 py-4 text-center text-gray-600 dark:text-gray-300">
© 2023 E-Commerce Store. All rights reserved.
</div>
</footer>
</div>관련 구성 요소
Glassmorphism 대시보드 레이아웃
사이드바, 기본 콘텐츠 영역, 여러 반투명 패널이 있는 복잡한 트라이어딕 색상의 glassmorphism 대시보드 레이아웃 구성 요소로, 완벽하게 반응하고 다크 모드를 지원합니다. 데이터 시각화 및 제어판을 위해 설계되었습니다.
다크 모드 포트폴리오 레이아웃
포트폴리오를 위한 다크 모드 반응형 레이아웃 구성 요소로, Tailwind CSS를 사용하는 단색 색 구성표를 특징으로 합니다. 콘텐츠에 대한 자리 표시자를 포함하며 JavaScript 없이 중간 정도의 복잡성을 위해 설계되었습니다.