サイトマップコンポーネント
パステルカラーを使用したダークモード用に設計されたレスポンシブサイトマップコンポーネントで、ダッシュボードに適しています。
HTMLコード
<div class="bg-gray-800 text-gray-200 dark:bg-gray-900 dark:text-gray-300 p-6 rounded-lg shadow-lg max-w-4xl mx-auto">
<h2 class="text-2xl font-bold mb-4">Site Map</h2>
<p class="mb-4">Overview of the main sections:</p>
<ul class="space-y-2">
<li class="bg-gray-700 dark:bg-gray-800 rounded p-4 shadow hover:bg-gray-600 dark:hover:bg-gray-700 transition duration-300">
<a href="#" class="flex items-center">
<img src="https://picsum.photos/30" alt="Icon" class="rounded-full mr-3">
<span>Dashboard</span>
</a>
</li>
<li class="bg-gray-700 dark:bg-gray-800 rounded p-4 shadow hover:bg-gray-600 dark:hover:bg-gray-700 transition duration-300">
<a href="#" class="flex items-center">
<img src="https://picsum.photos/30" alt="Icon" class="rounded-full mr-3">
<span>User Management</span>
</a>
</li>
<li class="bg-gray-700 dark:bg-gray-800 rounded p-4 shadow hover:bg-gray-600 dark:hover:bg-gray-700 transition duration-300">
<a href="#" class="flex items-center">
<img src="https://picsum.photos/30" alt="Icon" class="rounded-full mr-3">
<span>Reports</span>
</a>
</li>
<li class="bg-gray-700 dark:bg-gray-800 rounded p-4 shadow hover:bg-gray-600 dark:hover:bg-gray-700 transition duration-300">
<a href="#" class="flex items-center">
<img src="https://picsum.photos/30" alt="Icon" class="rounded-full mr-3">
<span>Settings</span>
</a>
</li>
</ul>
<div class="mt-6">
<p class="font-bold">User Profile</p>
<div class="flex items-center bg-gray-700 dark:bg-gray-800 rounded p-4 mt-2">
<img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="rounded-full mr-3">
<span>John Doe</span>
</div>
</div>
</div>