사이트 맵 구성 요소
마이크로 상호 작용, 단색 색 구성표, 복잡한 디자인, 어두운 테마 지원 및 Tailwind CSS를 사용하는 반응형 사이트 맵 구성 요소입니다.
HTML 코드
<div class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen p-8">
<div class="max-w-4xl mx-auto">
<h1 class="text-3xl font-bold mb-8 text-center">Site Map</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Section 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform transition duration-300 hover:scale-105 hover:shadow-xl">
<h2 class="text-xl font-semibold mb-4 dark:text-white">Section 1</h2>
<ul>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 1.1</a>
</li>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 1.2</a>
</li>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 1.3</a>
</li>
</ul>
</div>
<!-- Section 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform transition duration-300 hover:scale-105 hover:shadow-xl">
<h2 class="text-xl font-semibold mb-4 dark:text-white">Section 2</h2>
<ul>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 2.1</a>
</li>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 2.2</a>
</li>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 2.3</a>
</li>
</ul>
</div>
<!-- Section 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform transition duration-300 hover:scale-105 hover:shadow-xl">
<h2 class="text-xl font-semibold mb-4 dark:text-white">Section 3</h2>
<ul>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 3.1</a>
</li>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 3.2</a>
</li>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 3.3</a>
</li>
</ul>
</div>
<!-- Section 4 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform transition duration-300 hover:scale-105 hover:shadow-xl">
<h2 class="text-xl font-semibold mb-4 dark:text-white">Section 4</h2>
<ul>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 4.1</a>
</li>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 4.2</a>
</li>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 4.3</a>
</li>
</ul>
</div>
<!-- Section 5 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform transition duration-300 hover:scale-105 hover:shadow-xl">
<h2 class="text-xl font-semibold mb-4 dark:text-white">Section 5</h2>
<ul>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 5.1</a>
</li>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 5.2</a>
</li>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 5.3</a>
</li>
</ul>
</div>
<!-- Section 6 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform transition duration-300 hover:scale-105 hover:shadow-xl">
<h2 class="text-xl font-semibold mb-4 dark:text-white">Section 6</h2>
<ul>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 6.1</a>
</li>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 6.2</a>
</li>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 6.3</a>
</li>
</ul>
</div>
</div>
</div>
</div>
관련 구성 요소
Neumorphism Vibrant Site Map 구성 요소
뉴모픽 스타일과 생생한 색 구성표로 디자인된 간단하고 반응이 빠른 사이트 맵 구성 요소로, 문서 또는 Wiki 사이트에 적합합니다. 다크 모드 지원이 포함됩니다.
사이트 맵 구성 요소
반응형 디자인과 다크 모드를 지원하는 3D 스타일 사이트 맵 구성 요소입니다. 깊이와 참여를 위한 3차원 요소가 특징이며, 무작위 자리 표시자 이미지와 아바타를 사용합니다.
Neon_Glow_Sports_Sitemap_Component
네온/글로우 효과와 고대비 색상이 있는 간단하고 반응형 사이트맵 구성 요소로, 스포츠/피트니스 애플리케이션에 맞게 조정됩니다. 다크 모드 지원이 포함됩니다.