スティッキーナビゲーションコンポーネント
企業やイベントのWebサイトに適した、すっきりとした信頼できるシンプルなスティッキーナビゲーションバー。明るいアクセントカラー、完全な応答性、ダークモードのサポートを備えた黒と白のモノクロが特徴です。
HTMLコード
<header class="bg-white shadow-md dark:bg-gray-800 sticky top-0 z-50">
<nav class="container mx-auto px-4 py-3 flex items-center justify-between">
<a href="#" class="text-2xl font-bold text-gray-900 dark:text-white flex items-center space-x-2">
<svg class="h-8 w-8 text-indigo-600 dark:text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-3-3H8a3 3 0 00-3 3v2h5M10 2L3 6v10l7 4 7-4V6l-7-4zm0 0a2 2 0 100 4 2 2 0 000-4z" />
</svg>
<span>EventName</span>
</a>
<div class="hidden md:flex space-x-8">
<a href="#" class="text-gray-600 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400 text-lg font-medium transition duration-300 ease-in-out">Schedule</a>
<a href="#" class="text-gray-600 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400 text-lg font-medium transition duration-300 ease-in-out">Speakers</a>
<a href="#" class="text-gray-600 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400 text-lg font-medium transition duration-300 ease-in-out">Venue</a>
<a href="#" class="text-gray-600 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400 text-lg font-medium transition duration-300 ease-in-out">Sponsors</a>
<a href="#" class="text-indigo-600 dark:text-indigo-400 border border-indigo-600 dark:border-indigo-400 px-5 py-2 rounded-lg font-semibold hover:bg-indigo-600 hover:text-white dark:hover:bg-indigo-400 dark:hover:text-gray-900 transition duration-300 ease-in-out">Register</a>
</div>
<div class="md:hidden">
<button type="button" class="text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-white focus:outline-none focus:text-gray-700 dark:focus:text-white" aria-label="Toggle menu">
<svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</button>
</div>
</nav>
</header>関連コンポーネント
スティッキーナビゲーションコンポーネント
ソーシャルメディアインターフェイスに適したブルータリストスタイルのスティッキーナビゲーションコンポーネントで、大胆でハイコントラストなデザインとダークモードのサポートが特徴です。
スティッキーナビゲーションコンポーネント
スキューモーフィック スタイルで設計されたスティッキー ナビゲーション コンポーネントで、レスポンシブ デザインと Tailwind CSS を使用したダーク テーマのサポートを備えた e コマース Web サイトに適しています。