CCHub Logo CCHub Tailwind Collection
コンポーネント フッター Glassmorphism フッター コンポーネント

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

ぼかし効果のあるすりガラスのような半透明の要素を特徴とする glassmorphism スタイルのレスポンシブフッターコンポーネントで、ダークテーマをサポートします。

プレビュー

HTMLコード 

<footer class="bg-white bg-opacity-30 backdrop-blur-md rounded-lg p-6 dark:bg-gray-800 dark:bg-opacity-30 transition duration-300 ease-in-out">
    <div class="container mx-auto">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="text-center md:text-left">
                <h2 class="text-xl font-bold text-gray-800 dark:text-white">Connect with Us</h2>
                <p class="text-gray-600 dark:text-gray-300">Stay updated with our latest news and offers.</p>
            </div>
            <div class="mt-4 md:mt-0">
                <a href="#" class="text-gray-500 hover:text-gray-800 dark:hover:text-white mx-2"><img src="https://picsum.photos/40/40?random=1" alt="Avatar" class="rounded-full " /></a>
                <a href="#" class="text-gray-500 hover:text-gray-800 dark:hover:text-white mx-2"><img src="https://picsum.photos/40/40?random=2" alt="Avatar" class="rounded-full " /></a>
                <a href="#" class="text-gray-500 hover:text-gray-800 dark:hover:text-white mx-2"><img src="https://picsum.photos/40/40?random=3" alt="Avatar" class="rounded-full " /></a>
            </div>
        </div>
        <div class="flex justify-center mt-4">
            <a href="#" class="text-gray-500 hover:text-gray-800 dark:hover:text-white mx-2">Privacy Policy</a>
            <span class="text-gray-500 dark:text-gray-300">|</span>
            <a href="#" class="text-gray-500 hover:text-gray-800 dark:hover:text-white mx-2">Terms of Service</a>
        </div>
    </div>
</footer>

関連コンポーネント

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

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

開ける

水彩/アーティスティックなネオンフッター

ポートフォリオWebサイトに適した、水彩画/芸術的な美学と鮮やかなネオン配色を備えたシンプルでレスポンシブなフッターコンポーネント。ダークモードのサポートが含まれています。

開ける

フッターコンポーネント

ブログ/コンテンツ Web サイト用のニューモーフィックフッターコンポーネント、モノクロカラースキーム、ダークモードサポート付き。これは、適度に複雑なコンポーネントです。応答性が高いです。

開ける