HTML 代码
<nav class="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
<div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
<div class="relative flex items-center justify-between h-16">
<div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
<!-- Hamburger Icon -->
<button id="menu-toggle" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 dark:focus:ring-offset-gray-800 focus:ring-white" aria-expanded="false" aria-label="Main menu">
<span class="sr-only">Open main menu</span>
<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</button>
</div>
<div class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
<div class="flex-shrink-0">
<img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Avatar">
</div>
<div class="hidden sm:block">
<div class="flex space-x-4">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-600 hover:text-blue-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
<a href="#portfolio" class="text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-600 hover:text-blue-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Portfolio</a>
<a href="#about" class="text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-600 hover:text-blue-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">About</a>
<a href="#contact" class="text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-600 hover:text-blue-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a>
</div>
</div>
</div>
</div>
</div>
</nav>
<!-- Menu Items -->
<div id="menu" class="hidden sm:hidden bg-white dark:bg-gray-800">
<div class="px-2 pt-2 pb-3 space-y-1">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-600 hover:text-blue-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Home</a>
<a href="#portfolio" class="text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-600 hover:text-blue-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Portfolio</a>
<a href="#about" class="text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-600 hover:text-blue-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">About</a>
<a href="#contact" class="text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-600 hover:text-blue-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Contact</a>
</div>
</div>
<main class="p-6">
<h1 class="text-center text-3xl font-bold text-gray-800 dark:text-gray-200">Portfolio</h1>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mt-4">
<div class="max-w-sm rounded overflow-hidden shadow-lg bg-white dark:bg-gray-700">
<img class="w-full" src="https://picsum.photos/400/200" alt="Portfolio Item">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2">Project 1</div>
<p class="text-gray-700 dark:text-gray-300 text-base">Description of portfolio item 1.</p>
</div>
</div>
<div class="max-w-sm rounded overflow-hidden shadow-lg bg-white dark:bg-gray-700">
<img class="w-full" src="https://picsum.photos/400/201" alt="Portfolio Item">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2">Project 2</div>
<p class="text-gray-700 dark:text-gray-300 text-base">Description of portfolio item 2.</p>
</div>
</div>
<div class="max-w-sm rounded overflow-hidden shadow-lg bg-white dark:bg-gray-700">
<img class="w-full" src="https://picsum.photos/400/202" alt="Portfolio Item">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2">Project 3</div>
<p class="text-gray-700 dark:text-gray-300 text-base">Description of portfolio item 3.</p>
</div>
</div>
</div>
</main>