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

フッターコンポーネント

Tailwind CSS を使用して、ダーク テーマをサポートするレトロ/ビンテージ スタイルでデザインされたシンプルなレスポンシブ フッター コンポーネント。ビジネス/企業のWebサイトに適した基本的なレイアウトが特徴です。

プレビュー

HTMLコード 

<footer class="bg-blue-900 text-white py-6 mt-10 dark:bg-gray-800">
    <div class="container mx-auto text-center">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="mb-4 md:mb-0">
                <img src="https://picsum.photos/100/50" alt="Company Logo" class="mx-auto mb-2">
                <h2 class="text-lg font-bold">Company Name</h2>
                <p class="text-sm">Your tagline goes here.</p>
            </div>
            <div>
                <h3 class="text-md font-semibold mb-2">Follow Us</h3>
                <div class="flex justify-center space-x-4">
                    <a href="#" class="text-gray-400 hover:text-gray-200"><img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Facebook" class="h-6 w-6"></a>
                    <a href="#" class="text-gray-400 hover:text-gray-200"><img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Twitter" class="h-6 w-6"></a>
                    <a href="#" class="text-gray-400 hover:text-gray-200"><img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Instagram" class="h-6 w-6"></a>
                </div>
            </div>
        </div>
        <div class="mt-6 border-t border-gray-600 pt-4">
            <p class="text-xs">&copy; 2023 Company Name. All rights reserved.</p>
        </div>
    </div>
</footer>

関連コンポーネント

ニューモーフィックバイブラントフッター

シンプルでレスポンシブなフッター コンポーネントで、ニューモルフィックなデザイン原則と鮮やかな色でスタイル付けされています。繊細な影のある柔らかく押し出された外観が特徴で、彩度の高いアクセントカラーを維持しています。フッターには、サイトナビゲーション、ソーシャルリンク、およびダークモードを完全にサポートする著作権情報の基本セクションが含まれています。

開ける

Industrial_Charity_Footer

非営利団体/慈善団体のWebサイト向けの複雑でレスポンシブなフッターコンポーネントで、レトロ/ビンテージのカラーパレットを備えたインダストリアルで生の美学が特徴です。ナビゲーション、連絡先情報、ソーシャルリンク、ニュースレターのサインアップが含まれ、ダークモードを完全にサポートしています。

開ける

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

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

開ける