사이트 맵 구성 요소
반응형 디자인과 다크 모드를 지원하는 3D 스타일 사이트 맵 구성 요소입니다. 깊이와 참여를 위한 3차원 요소가 특징이며, 무작위 자리 표시자 이미지와 아바타를 사용합니다.
HTML 코드
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg max-w-4xl mx-auto p-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Site Map</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Home</h3>
<img src="https://picsum.photos/200/100?random=1" alt="Home Image" class="rounded-lg mt-2">
</div>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">About Us</h3>
<img src="https://picsum.photos/200/100?random=2" alt="About Us Image" class="rounded-lg mt-2">
</div>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Services</h3>
<img src="https://picsum.photos/200/100?random=3" alt="Services Image" class="rounded-lg mt-2">
</div>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Contact</h3>
<img src="https://picsum.photos/200/100?random=4" alt="Contact Image" class="rounded-lg mt-2">
</div>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Blog</h3>
<img src="https://picsum.photos/200/100?random=5" alt="Blog Image" class="rounded-lg mt-2">
</div>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Portfolio</h3>
<img src="https://picsum.photos/200/100?random=6" alt="Portfolio Image" class="rounded-lg mt-2">
</div>
</div>
</div>