ナビゲーション強化コンポーネント
Tailwind CSSを使用してポートフォリオを表示するためのシンプルなダークモードナビゲーション強化コンポーネント。
HTMLコード
<nav class="bg-gray-800 dark:bg-gray-900 p-4">
<div class="max-w-6xl mx-auto flex justify-between items-center">
<h1 class="text-white text-xl font-bold">My Portfolio</h1>
<ul class="flex space-x-4">
<li><a href="#" class="text-gray-300 dark:text-gray-400 hover:text-white">Home</a></li>
<li><a href="#" class="text-gray-300 dark:text-gray-400 hover:text-white">About</a></li>
<li><a href="#" class="text-gray-300 dark:text-gray-400 hover:text-white">Projects</a></li>
<li><a href="#" class="text-gray-300 dark:text-gray-400 hover:text-white">Contact</a></li>
</ul>
</div>
</nav>
<section class="bg-gray-900 dark:bg-gray-800 p-8">
<div class="max-w-6xl mx-auto text-center">
<h2 class="text-white text-2xl font-bold">Featured Projects</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6">
<div class="bg-gray-700 dark:bg-gray-600 p-4 rounded-lg">
<img src="https://picsum.photos/200/300?random=1" alt="Project 1" class="rounded-lg w-full" />
<h3 class="text-white font-semibold mt-2">Project 1</h3>
<p class="text-gray-300 dark:text-gray-400">Description of Project 1.</p>
</div>
<div class="bg-gray-700 dark:bg-gray-600 p-4 rounded-lg">
<img src="https://picsum.photos/200/300?random=2" alt="Project 2" class="rounded-lg w-full" />
<h3 class="text-white font-semibold mt-2">Project 2</h3>
<p class="text-gray-300 dark:text-gray-400">Description of Project 2.</p>
</div>
<div class="bg-gray-700 dark:bg-gray-600 p-4 rounded-lg">
<img src="https://picsum.photos/200/300?random=3" alt="Project 3" class="rounded-lg w-full" />
<h3 class="text-white font-semibold mt-2">Project 3</h3>
<p class="text-gray-300 dark:text-gray-400">Description of Project 3.</p>
</div>
</div>
</div>
</section>
<footer class="bg-gray-800 dark:bg-gray-900 p-4 mt-8">
<div class="max-w-6xl mx-auto text-center">
<p class="text-gray-300 dark:text-gray-400">© 2023 My Portfolio. All rights reserved.</p>
</div>
</footer>