マテリアルデザインビジネスヘッダー
マテリアルデザインは、ビジネスWebサイト用の補完的な配色を備えたシンプルなヘッダーコンポーネントに触発されました。ダークテーマをサポートするレスポンシブデザイン。
HTMLコード
<header class="bg-blue-500 text-white py-4 shadow-md dark:bg-gray-800">
<div class="container mx-auto flex justify-between items-center">
<div class="text-xl font-bold">Business Name</div>
<nav>
<ul class="flex space-x-4">
<li><a href="#" class="hover:text-blue-200 dark:hover:text-gray-400">Home</a></li>
<li><a href="#" class="hover:text-blue-200 dark:hover:text-gray-400">About</a></li>
<li><a href="#" class="hover:text-blue-200 dark:hover:text-gray-400">Services</a></li>
<li><a href="#" class="hover:text-blue-200 dark:hover:text-gray-400">Contact</a></li>
</ul>
</nav>
</div>
</header>関連コンポーネント
Skeuomorphism Triadic Simple Portfolio Header コンポーネント
Skeuomorphism Triadic Simple Portfolio Header コンポーネント
3D レトロ ウェザー ヘッダー コンポーネント
3Dデザイン要素、落ち着いたカラーパレット、ダークモードをサポートする完全な応答性を特徴とする、天候/気候アプリケーション向けの複雑なレトロなテーマのヘッダーコンポーネント。現在の天気情報、場所、日付、ナビゲーションが表示されます。