HTML 代码
<nav class="bg-gray-800 text-white dark:bg-gray-900 p-4">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center space-x-4">
<a href="#" class="text-lg font-semibold hover:text-blue-400 dark:hover:text-blue-300 transition duration-300">Home</a>
<a href="#portfolio" class="text-lg font-semibold hover:text-blue-400 dark:hover:text-blue-300 transition duration-300">Portfolio</a>
<a href="#about" class="text-lg font-semibold hover:text-blue-400 dark:hover:text-blue-300 transition duration-300">About</a>
<a href="#contact" class="text-lg font-semibold hover:text-blue-400 dark:hover:text-blue-300 transition duration-300">Contact</a>
</div>
<div class="flex items-center space-x-4">
<a href="#" class="py-2 px-4 bg-blue-600 hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600 rounded transition duration-300">Login</a>
<a href="#" class="py-2 px-4 bg-blue-600 hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600 rounded transition duration-300">Sign Up</a>
</div>
</div>
</nav>
<div class="bg-gray-100 text-black dark:bg-gray-800 dark:text-white">
<div class="container mx-auto p-8">
<h1 class="text-3xl font-bold mb-4">My Portfolio</h1>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-700 rounded shadow-lg overflow-hidden transform transition duration-500 hover:scale-105">
<img src="https://picsum.photos/400/300?random=1" alt="Project 1" class="w-full h-32 object-cover">
<div class="p-4">
<h2 class="text-xl font-semibold">Project Title 1</h2>
<p class="text-gray-600 dark:text-gray-300">Brief description of the project.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-700 rounded shadow-lg overflow-hidden transform transition duration-500 hover:scale-105">
<img src="https://picsum.photos/400/300?random=2" alt="Project 2" class="w-full h-32 object-cover">
<div class="p-4">
<h2 class="text-xl font-semibold">Project Title 2</h2>
<p class="text-gray-600 dark:text-gray-300">Brief description of the project.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-700 rounded shadow-lg overflow-hidden transform transition duration-500 hover:scale-105">
<img src="https://picsum.photos/400/300?random=3" alt="Project 3" class="w-full h-32 object-cover">
<div class="p-4">
<h2 class="text-xl font-semibold">Project Title 3</h2>
<p class="text-gray-600 dark:text-gray-300">Brief description of the project.</p>
</div>
</div>
</div>
</div>
</div>