フッターナビゲーションコンポーネント

すりガラスのような半透明の要素とぼかし効果を特徴とする glassmorphism スタイルのレスポンシブフッターナビゲーションコンポーネント。ダークモードをサポートし、プレースホルダー画像が含まれています。

プレビュー

HTMLコード

<footer class="bg-white bg-opacity-30 backdrop-blur-lg dark:bg-gray-900 dark:bg-opacity-30 py-8">
    <div class="container mx-auto px-4">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="flex items-center space-x-4">
                <img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full">
                <span class="text-lg font-bold text-gray-800 dark:text-gray-200">Your Company</span>
            </div>
            <nav class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-6 mt-4 md:mt-0">
                <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition">Home</a>
                <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition">About</a>
                <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition">Services</a>
                <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition">Contact</a>
            </nav>
        </div>
        <div class="mt-6 text-center">
            <p class="text-gray-500 dark:text-gray-400">© 2023 Your Company. All rights reserved.</p>
        </div>
    </div>
</footer>

フッターナビゲーションコンポーネント

プレビュー

HTMLコード

関連コンポーネント

Glassmorphismグレースケールヘルスケアフッター

ブルータリストEコマースフッターナビゲーション

Glassmorphismフッターナビゲーション