スキューモーフィックナビゲーションバー

Tailwind CSS を使用したダークテーマをサポートするスキューモーフィックスタイルで設計されたレスポンシブナビゲーションバーコンポーネント。

プレビュー

HTMLコード

<nav class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-lg">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img src="https://picsum.photos/50/50?random=1" alt="Logo" class="h-10 rounded-full">
            <span class="text-xl font-bold dark:text-white">Brand</span>
        </div>
        <div class="hidden md:flex space-x-4">
            <a href="#" class="text-gray-800 dark:text-gray-200 p-2 rounded-lg transition duration-200 hover:bg-gray-300 dark:hover:bg-gray-700">
                Home
            </a>
            <a href="#" class="text-gray-800 dark:text-gray-200 p-2 rounded-lg transition duration-200 hover:bg-gray-300 dark:hover:bg-gray-700">
                About
            </a>
            <a href="#" class="text-gray-800 dark:text-gray-200 p-2 rounded-lg transition duration-200 hover:bg-gray-300 dark:hover:bg-gray-700">
                Services
            </a>
            <a href="#" class="text-gray-800 dark:text-gray-200 p-2 rounded-lg transition duration-200 hover:bg-gray-300 dark:hover:bg-gray-700">
                Contact
            </a>
        </div>
        <div class="md:hidden flex items-center">
            <button class="text-gray-800 dark:text-gray-200 p-2 rounded-lg focus:outline-none">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
                </svg>
            </button>
        </div>
    </div>
    <div class="md:hidden">
        <div class="flex flex-col space-y-1 mt-2">
            <a href="#" class="text-gray-800 dark:text-gray-200 p-2 rounded-lg transition duration-200 hover:bg-gray-300 dark:hover:bg-gray-700">
                Home
            </a>
            <a href="#" class="text-gray-800 dark:text-gray-200 p-2 rounded-lg transition duration-200 hover:bg-gray-300 dark:hover:bg-gray-700">
                About
            </a>
            <a href="#" class="text-gray-800 dark:text-gray-200 p-2 rounded-lg transition duration-200 hover:bg-gray-300 dark:hover:bg-gray-700">
                Services
            </a>
            <a href="#" class="text-gray-800 dark:text-gray-200 p-2 rounded-lg transition duration-200 hover:bg-gray-300 dark:hover:bg-gray-700">
                Contact
            </a>
        </div>
    </div>
</nav>

スキューモーフィックナビゲーションバー

プレビュー

HTMLコード

関連コンポーネント

グラデーション/カラートランジショングレースケールダッシュボードナビゲーションバー

レトロ/ビンテージソーシャルメディアナビゲーションバー

スキューモーフィックナビゲーションバー