CCHub Logo CCHub Tailwind Collection
コンポーネント フッターナビゲーション フッターナビゲーションコンポーネント

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

スキューモーフィックスタイルでデザインされたレスポンシブフッターナビゲーションコンポーネントで、eコマースに適したインタラクティブな要素を備えています。トライアドカラースキームに従い、ダークモードをサポートします。

プレビュー

HTMLコード 

<footer class="bg-gray-100 dark:bg-gray-900 p-4 shadow-lg rounded-lg">
    <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
        <div class="flex items-center mb-4 md:mb-0">
            <img src="https://picsum.photos/50" alt="Logo" class="rounded-full mr-2">
            <h2 class="text-xl font-semibold dark:text-white">Shop Logo</h2>
        </div>
        <nav class="flex flex-col md:flex-row text-gray-600 dark:text-gray-300">
            <a href="#" class="mx-2 transition-colors duration-300 hover:text-blue-500 dark:hover:text-blue-400">Home</a>
            <a href="#" class="mx-2 transition-colors duration-300 hover:text-blue-500 dark:hover:text-blue-400">Products</a>
            <a href="#" class="mx-2 transition-colors duration-300 hover:text-blue-500 dark:hover:text-blue-400">About Us</a>
            <a href="#" class="mx-2 transition-colors duration-300 hover:text-blue-500 dark:hover:text-blue-400">Contact</a>
        </nav>
    </div>
    <div class="mt-4 text-center text-gray-600 dark:text-gray-300">
        <p>&copy; 2023 E-Commerce. All rights reserved.</p>
    </div>
</footer>

関連コンポーネント

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

現実世界の要素を模倣するためにスキューモーフィック スタイルで設計されたレスポンシブ フッター ナビゲーション コンポーネントで、ダーク テーマのサポートと Tailwind CSS の使用が特徴です。このコンポーネントには、リンク、プレースホルダー画像、アバターが含まれます。

開ける

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

単色の配色でGlassmorphismスタイルでデザインされたシンプルなフッターナビゲーションコンポーネントです。レスポンシブで、ダークモードをサポートし、eコマースWebサイトに適しています。

開ける

フッターナビゲーションコンポーネント - インダストリアルオーシャン

オーシャン/ブルーの配色を備えたインダストリアルスタイルの複雑でレスポンシブなフッターナビゲーションコンポーネントで、イベント/会議のWebサイトに適しています。複数列のリンク、ソーシャル メディア アイコン、著作権、およびダーク モードのサポートが含まれます。

開ける