ヘッダーコンポーネント
マイクロインタラクション、補色スキーム、複雑な複雑さを備えたヘッダーコンポーネント、ダッシュボードの目的、Tailwind CSSを使用。
HTMLコード
<header class="bg-gray-100 dark:bg-gray-800 shadow-md">
<div class="container mx-auto px-4 py-4 flex items-center justify-between">
<div class="flex items-center space-x-4">
<h1 class="text-xl font-bold text-gray-800 dark:text-white">Dashboard</h1>
<nav class="hidden md:flex space-x-4">
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out transform hover:scale-105">Overview</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-green-500 dark:hover:text-green-400 transition duration-300 ease-in-out transform hover:scale-105">Analytics</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-yellow-500 dark:hover:text-yellow-400 transition duration-300 ease-in-out transform hover:scale-105">Reports</a>
</nav>
</div>
<div class="flex items-center space-x-4">
<button class="text-gray-600 dark:text-gray-300 hover:text-red-500 dark:hover:text-red-400 transition duration-300 ease-in-out transform hover:rotate-6 focus:outline-none">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0a3 3 0 11-6 0m6 0v2a3 3 0 11-6 0v-2"></path></svg>
</button>
<div class="relative">
<button class="flex items-center space-x-2 text-gray-600 dark:text-gray-300 hover:text-purple-500 dark:hover:text-purple-400 transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none">
<img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<span class="hidden md:block font-medium">John Doe</span>
</button>
<!-- Dropdown would be implemented with JS, not included here -->
</div>
</div>
</div>
</header>