Glassmorphism ナビゲーション コンポーネント
電子商取引サイト用のglassmorphismスタイルのナビゲーションコンポーネントで、単色、レスポンシブデザイン、Tailwind CSSを使用したダークモードのサポートを特徴としています。
HTMLコード
<nav class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg shadow-lg md:flex md:justify-between md:items-center py-4 px-6 fixed w-full z-10 dark:bg-gray-800 dark:bg-opacity-10 dark:backdrop-filter dark:backdrop-blur-lg">
<div class="flex justify-between items-center">
<a href="#" class="text-gray-700 text-xl font-bold md:text-2xl dark:text-white">Your Logo</a>
<div class="flex md:hidden">
<button type="button" class="text-gray-600 hover:text-gray-800 focus:outline-none focus:text-gray-800 dark:text-gray-200 dark:hover:text-white">
<svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
<path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"/>
</svg>
</button>
</div>
</div>
<div class="hidden md:flex flex-col md:flex-row md:mx-6">
<a href="#" class="my-1 text-gray-700 hover:text-gray-900 md:mx-4 md:my-0 dark:text-gray-200 dark:hover:text-white">Home</a>
<a href="#" class="my-1 text-gray-700 hover:text-gray-900 md:mx-4 md:my-0 dark:text-gray-200 dark:hover:text-white">Shop</a>
<a href="#" class="my-1 text-gray-700 hover:text-gray-900 md:mx-4 md:my-0 dark:text-gray-200 dark:hover:text-white">Categories</a>
<a href="#" class="my-1 text-gray-700 hover:text-gray-900 md:mx-4 md:my-0 dark:text-gray-200 dark:hover:text-white">Contact</a>
</div>
<div class="relative hidden md:block">
<span class="absolute inset-y-0 left-0 flex items-center pl-3">
<svg class="h-5 w-5 text-gray-400" viewBox="0 0 24 24" fill="none">
<path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
<input type="text" class="w-full border rounded-md pl-10 pr-4 py-2 focus:border-blue-500 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-white" placeholder="Search">
</div>
</nav>関連コンポーネント
ブルータリズムEコマースナビゲーションコンポーネント
Tailwind CSSを使用した複雑で残忍なeコマースナビゲーションコンポーネントで、ハイコントラスト(ブラック/ホワイト)のトライアドカラースキーム(イエロー、シアン、フクシア)、CSSのみのメガメニュー、CSSのみの検索表示、CSSのみのレスポンシブモバイルメニュー、ダークモードのサポートを備えています。HTMLのみ、JavaScriptは使用しません。
マテリアル デザイン ナビゲーション コンポーネント
グレースケールの配色を使用したソーシャルメディアインターフェース用のシンプルでレスポンシブなマテリアルデザインナビゲーションコンポーネント。ロゴ、ナビゲーションリンク、検索バー、ユーザーアバターを備えたすっきりとしたレイアウトが特徴です。Tailwind の dark: プレフィックスを使用したダーク モードのサポートが含まれています。