フッターコンポーネント

補色スキームを備えたソーシャルメディア用のシンプルなダークモードフッターコンポーネント。

プレビュー

HTMLコード

<footer class="bg-gray-800 text-white py-4">
    <div class="container mx-auto flex flex-col items-center">
        <div class="flex space-x-4 mb-3">
            <a href="#" class="text-gray-400 hover:text-gray-200">About</a>
            <a href="#" class="text-gray-400 hover:text-gray-200">Contact</a>
            <a href="#" class="text-gray-400 hover:text-gray-200">Privacy Policy</a>
        </div>
        <div class="flex space-x-4 mb-3">
            <a href="#" class="text-gray-400 hover:text-gray-200">
                <img src="https://picsum.photos/30/30" alt="Facebook" class="inline-block">
            </a>
            <a href="#" class="text-gray-400 hover:text-gray-200">
                <img src="https://picsum.photos/30/30" alt="Twitter" class="inline-block">
            </a>
            <a href="#" class="text-gray-400 hover:text-gray-200">
                <img src="https://picsum.photos/30/30" alt="Instagram" class="inline-block">
            </a>
        </div>
        <div class="text-center">
            <p class="text-gray-400">© 2023 Your Company. All rights reserved.</p>
        </div>
    </div>
</footer>

関連コンポーネント

ソーシャルメディアフッターコンポーネント

ソーシャルネットワーキングインターフェイス用のレスポンシブフッターコンポーネントで、モノクロの青の配色を使用してマテリアルデザインの原則に基づいて設計されています。グリッドベースのレイアウト、深度効果(シャドウ)、インタラクティブ要素のホバーおよびトランジションアニメーション、ニュースレター購読フォーム、ソーシャルアイコン、ユーザーアバター、およびTailwindのdark:モディファイアによるダークモードのサポートを備えています。

開ける

Skeuomorphic フッターコンポーネント

スキューモーフィックデザイン、類似の配色(緑、青緑)、およびビジネスWebサイトに適した適度な複雑さを備えたレスポンシブフッターコンポーネント。リンク、ロゴプレースホルダー、シャドウとグラデーションで実現される微妙なスキューモーフィック効果が含まれています。ライトモードとダークモードをサポートします。

開ける

フッターコンポーネントフッター

類似の配色を使用した、微妙な Skeuomorphism デザインのシンプルなフッターコンポーネント。これには、著作権表示、いくつかのナビゲーションリンク、ソーシャルメディアアイコンが含まれています。デザインはレスポンシブで、ダークモードをサポートしています。

開ける