DarkTriadicシンプルビジネスヘッダー
ビジネスWebサイト向けのダークモードサポートを備えたレスポンシブヘッダーコンポーネント
HTMLコード
<header class="bg-gray-900 text-gray-300 dark:bg-gray-dark dark:text-gray-light shadow-md">
<div class="container mx-auto px-6 py-4">
<div class="flex items-center justify-between">
<div class="text-xl font-bold text-white dark:text-white">Business Name</div>
<nav class="space-x-4">
<a href="#" class="hover:text-white dark:hover:text-white">Home</a>
<a href="#" class="hover:text-white dark:hover:text-white">About</a>
<a href="#" class="hover:text-white dark:hover:text-white">Services</a>
<a href="#" class="hover:text-white dark:hover:text-white">Contact</a>
</nav>
</div>
</div>
</header>