ヘッダーコンポーネント
モノクロのスタイル設定とダークモードのサポートを備えたブログまたはコンテンツサイト用のシンプルでレスポンシブなヘッダーコンポーネントで、ナビゲーションリンクにカーソルを合わせたときの微妙なマイクロインタラクションに焦点を当てています。
HTMLコード
<header class="bg-gray-100 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 shadow-sm transition-colors duration-300">
<div class="container mx-auto px-4 py-4 flex flex-col md:flex-row justify-between items-center">
<div class="flex items-center mb-4 md:mb-0">
<a href="#" class="text-2xl font-bold text-gray-800 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
MyBlog
</a>
</div>
<nav class="">
<ul class="flex flex-wrap justify-center gap-x-6 gap-y-2">
<li>
<a href="#" class="relative text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-all duration-200 ease-in-out font-medium group py-1 px-2 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
Home
<span class="absolute left-0 bottom-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
</a>
</li>
<li>
<a href="#" class="relative text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-all duration-200 ease-in-out font-medium group py-1 px-2 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
Articles
<span class="absolute left-0 bottom-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
</a>
</li>
<li>
<a href="#" class="relative text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-all duration-200 ease-in-out font-medium group py-1 px-2 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
About
<span class="absolute left-0 bottom-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
</a>
</li>
<li>
<a href="#" class="relative text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-all duration-200 ease-in-out font-medium group py-1 px-2 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
Contact
<span class="absolute left-0 bottom-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
</a>
</li>
</ul>
</nav>
</div>
</header>