HTML 代码
<div class="backdrop-filter backdrop-blur-lg bg-opacity-20 bg-gray-700 text-white dark:bg-gray-800 dark:bg-opacity-30 p-6 rounded-lg shadow-xl w-full max-w-6xl mx-auto mt-10">
<div class="flex justify-between items-center border-b border-gray-600 dark:border-gray-700 pb-4">
<h2 class="text-2xl font-semibold">Dashboard Navigation</h2>
<button class="text-gray-300 hover:text-white focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
<div class="mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="backdrop-filter backdrop-blur-lg bg-opacity-30 bg-gray-600 dark:bg-gray-700 dark:bg-opacity-40 p-4 rounded-md">
<h3 class="font-bold text-lg mb-2">Overview</h3>
<ul>
<li class="mb-2"><a href="#" class="text-gray-300 hover:text-white">Dashboard Home</a></li>
<li class="mb-2"><a href="#" class="text-gray-300 hover:text-white">Analytics</a></li>
<li><a href="#" class="text-gray-300 hover:text-white">Reporting</a></li>
</ul>
</div>
<div class="backdrop-filter backdrop-blur-lg bg-opacity-30 bg-gray-600 dark:bg-gray-700 dark:bg-opacity-40 p-4 rounded-md">
<h3 class="font-bold text-lg mb-2">Management</h3>
<ul>
<li class="mb-2"><a href="#" class="text-gray-300 hover:text-white">Users</a></li>
<li class="mb-2"><a href="#" class="text-gray-300 hover:text-white">Settings</a></li>
<li><a href="#" class="text-gray-300 hover:text-white">Permissions</a></li>
</ul>
</div>
<div class="backdrop-filter backdrop-blur-lg bg-opacity-30 bg-gray-600 dark:bg-gray-700 dark:bg-opacity-40 p-4 rounded-md">
<h3 class="font-bold text-lg mb-2">Projects</h3>
<ul>
<li class="mb-2"><a href="#" class="text-gray-300 hover:text-white">Active Projects</a></li>
<li class="mb-2"><a href="#" class="text-gray-300 hover:text-white">Archived Projects</a></li>
<li><a href="#" class="text-gray-300 hover:text-white">Add New Project</a></li>
</ul>
</div>
<div class="backdrop-filter backdrop-blur-lg bg-opacity-30 bg-gray-600 dark:bg-gray-700 dark:bg-opacity-40 p-4 rounded-md">
<h3 class="font-bold text-lg mb-2">Support</h3>
<ul>
<li class="mb-2"><a href="#" class="text-gray-300 hover:text-white">Help Center</a></li>
<li><a href="#" class="text-gray-300 hover:text-white">Contact Us</a></li>
</ul>
</div>
</div>
<div class="mt-6 border-t border-gray-600 dark:border-gray-700 pt-4 flex justify-between items-center">
<div>
<p class="text-gray-400 text-sm">Last updated: Today</p>
</div>
<div>
<img class="h-8 w-8 rounded-full ring-2 ring-gray-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
</div>
</div>
</div>