사이트 맵 구성 요소
전자 상거래를 위한 다크 모드를 지원하는 반응형 사이트 맵 구성 요소. 스타일링에 Tailwind CSS를 사용합니다. 유사한 색 구성표를 따릅니다. 이미지 출처: picsum.photos.
HTML 코드
<footer class="bg-gray-900 text-gray-300 py-12">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h4 class="text-lg font-semibold mb-4 text-blue-400">Shop</h4>
<ul class="space-y-2">
<li><a href="#" class="hover:text-blue-600">All Products</a></li>
<li><a href="#" class="hover:text-blue-600">Categories</a></li>
<li><a href="#" class="hover:text-blue-600">New Arrivals</a></li>
<li><a href="#" class="hover:text-blue-600">Best Sellers</a></li>
<li><a href="#" class="hover:text-blue-600">On Sale</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4 text-blue-400">Account</h4>
<ul class="space-y-2">
<li><a href="#" class="hover:text-blue-600">My Account</a></li>
<li><a href="#" class="hover:text-blue-600">Order History</a></li>
<li><a href="#" class="hover:text-blue-600">Wishlist</a></li>
<li><a href="#" class="hover:text-blue-600">Track Order</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4 text-blue-400">Information</h4>
<ul class="space-y-2">
<li><a href="#" class="hover:text-blue-600">About Us</a></li>
<li><a href="#" class="hover:text-blue-600">Contact Us</a></li>
<li><a href="#" class="hover:text-blue-600">Privacy Policy</a></li>
<li><a href="#" class="hover:text-blue-600">Terms of Service</a></li>
<li><a href="#" class="hover:text-blue-600">Shipping & Returns</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4 text-blue-400">Connect</h4>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-blue-600"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="text-gray-400 hover:text-blue-600"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-gray-400 hover:text-blue-600"><i class="fab fa-instagram"></i></a>
<a href="#" class="text-gray-400 hover:text-blue-600"><i class="fab fa-linkedin-in"></i></a>
</div>
<div class="mt-6">
<h5 class="text-md font-semibold mb-3 text-blue-400">Subscribe to our Newsletter</h5>
<form class="flex">
<input type="email" placeholder="Enter your email" class="py-2 px-4 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-600 bg-gray-800 text-gray-200 w-full">
<button type="submit" class="bg-blue-600 text-white py-2 px-4 rounded-r-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-600">Subscribe</button>
</form>
</div>
</div>
</div>
<hr class="my-8 border-gray-700">
<div class="text-center text-gray-500">
© 2023 Your E-commerce Store. All rights reserved.
</div>
</div>
</footer>관련 구성 요소
Industrial_Site_Map_Component
따뜻한 중립을 사용하는 산업 디자인 미학이 있는 농업/농업 웹사이트를 위한 사이트 맵 구성 요소입니다. 반응형 레이아웃, 다크 모드 지원 및 대화형 링크 섹션이 특징입니다.