暗黑模式作品集布局
一个用于投资组合的黑暗模式响应式布局组件，使用Tailwind CSS的单色配色方案。包括内容占位符，并且设计为中等复杂度，不使用JavaScript。
HTML 代码
<div class="min-h-screen bg-gray-900 text-gray-200 p-4">
<div class="container mx-auto">
<header class="flex justify-between items-center py-6">
<h1 class="text-2xl font-bold text-gray-100">My Portfolio</h1>
<nav>
<ul class="flex space-x-4">
<li><a href="#" class="hover:text-gray-100">Home</a></li>
<li><a href="#" class="hover:text-gray-100">Projects</a></li>
<li><a href="#" class="hover:text-gray-100">Contact</a></li>
</ul>
</nav>
</header>
<main class="grid grid-cols-1 md:grid-cols-2 gap-8 py-8">
<section>
<h2 class="text-xl font-semibold mb-4">About Me</h2>
<p class="text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</section>
<section>
<h2 class="text-xl font-semibold mb-4">Recent Projects</h2>
<div class="space-y-4">
<div class="bg-gray-800 p-4 rounded-md">
<h3 class="font-semibold">Project One</h3>
<p class="text-gray-500 text-sm">A brief description of project one.</p>
</div>
<div class="bg-gray-800 p-4 rounded-md">
<h3 class="font-semibold">Project Two</h3>
<p class="text-gray-500 text-sm">A brief description of project two.</p>
</div>
</div>
</section>
</main>
<footer class="text-center py-6 text-gray-500">
© 2023 My Portfolio
</footer>
</div>
</div>