CCHub Logo CCHub Tailwind Collection
コンポーネント 航法 ナビゲーションコンポーネント

ナビゲーションコンポーネント

パステルカラーの配色とシンプルなレイアウトを備えたeコマース用に設計されたレスポンシブダークモードナビゲーションコンポーネント。

プレビュー

HTMLコード 

<nav class="bg-gray-800 dark:bg-gray-900 p-4">
    <div class="container mx-auto flex items-center justify-between">
        <div class="flex items-center space-x-4">
            <a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">Home</a>
            <a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">Shop</a>
            <a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">About Us</a>
            <a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">Contact</a>
        </div>
        <div class="flex items-center space-x-4">
            <a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">
                <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            </a>
            <a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">Cart</a>
        </div>
    </div>
</nav>

関連コンポーネント

レトロなビンテージナビゲーションコンポーネント

レトロ/ビンテージデザインでスタイリングされたナビゲーションコンポーネントで、ダッシュボードの単色の配色が施されています。リンクが含まれており、ダークモードをサポートしています。

開ける

3D ナビゲーションコンポーネント

Tailwind CSSで設計されたレスポンシブ3Dナビゲーションコンポーネントで、ダークテーマのサポートと魅力的な3次元要素が特徴です。

開ける

ブルータリズムEコマースナビゲーションコンポーネント

Tailwind CSSを使用した複雑で残忍なeコマースナビゲーションコンポーネントで、ハイコントラスト(ブラック/ホワイト)のトライアドカラースキーム(イエロー、シアン、フクシア)、CSSのみのメガメニュー、CSSのみの検索表示、CSSのみのレスポンシブモバイルメニュー、ダークモードのサポートを備えています。HTMLのみ、JavaScriptは使用しません。

開ける