사이트 맵 구성 요소
생생한 색상과 마이크로 상호 작용, 다크 모드를 지원하는 전자 상거래 사이트를 위한 간단하고 반응이 빠른 사이트맵 구성 요소입니다.
HTML 코드
<div class="bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 text-white dark:bg-gradient-to-r dark:from-gray-700 dark:via-gray-800 dark:to-gray-900 py-12 px-6">
<div class="container mx-auto">
<h2 class="text-3xl font-bold text-center mb-8">Site Map</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<div class="p-4 bg-white bg-opacity-20 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 hover:bg-opacity-30">
<h3 class="font-semibold text-xl mb-4">Shop</h3>
<ul>
<li class="mb-2"><a href="#" class="hover:underline">All Products</a></li>
<li class="mb-2"><a href="#" class="hover:underline">Categories</a></li>
<li class="mb-2"><a href="#" class="hover:underline">Sale Items</a></li>
</ul>
</div>
<div class="p-4 bg-white bg-opacity-20 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 hover:bg-opacity-30">
<h3 class="font-semibold text-xl mb-4">Customer Service</h3>
<ul>
<li class="mb-2"><a href="#" class="hover:underline">Contact Us</a></li>
<li class="mb-2"><a href="#" class="hover:underline">FAQs</a></li>
<li class="mb-2"><a href="#" class="hover:underline">Shipping Information</a></li>
<li class="mb-2"><a href="#" class="hover:underline">Returns & Exchanges</a></li>
</ul>
</div>
<div class="p-4 bg-white bg-opacity-20 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 hover:bg-opacity-30">
<h3 class="font-semibold text-xl mb-4">About Us</h3>
<ul>
<li class="mb-2"><a href="#" class="hover:underline">Our Story</a></li>
<li class="mb-2"><a href="#" class="hover:underline">Careers</a></li>
<li class="mb-2"><a href="#" class="hover:underline">Terms of Service</a></li>
<li class="mb-2"><a href="#" class="hover:underline">Privacy Policy</a></li>
</ul>
</div>
<div class="p-4 bg-white bg-opacity-20 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 hover:bg-opacity-30">
<h3 class="font-semibold text-xl mb-4">Follow Us</h3>
<ul>
<li class="mb-2"><a href="#" class="hover:underline">Facebook</a></li>
<li class="mb-2"><a href="#" class="hover:underline">Instagram</a></li>
<li class="mb-2"><a href="#" class="hover:underline">Twitter</a></li>
</ul>
</div>
</div>
</div>
</div>