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

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

ダークテーマをサポートするダッシュボード用のレスポンシブフッターナビゲーションコンポーネントで、トライアドカラーと複雑な要素を使用したリンクホバーでのマイクロインタラクションを特徴としています。JavaScriptは不要で、Tailwind CSSを使用したHTMLのみ。

プレビュー

HTMLコード 

<footer class="bg-blue-100 dark:bg-blue-900">
  <div class="container mx-auto px-6 py-8">
    <div class="flex flex-col items-center text-center">
      <div class="flex flex-wrap justify-center -mx-4">
        <a href="#" class="mx-4 text-sm text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300 ease-in-out transform hover:scale-110">About</a>
        <a href="#" class="mx-4 text-sm text-red-800 dark:text-red-200 hover:text-red-600 dark:hover:text-red-400 transition duration-300 ease-in-out transform hover:scale-110">Blog</a>
        <a href="#" class="mx-4 text-sm text-yellow-800 dark:text-yellow-200 hover:text-yellow-600 dark:hover:text-yellow-400 transition duration-300 ease-in-out transform hover:scale-110">Careers</a>
        <a href="#" class="mx-4 text-sm text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300 ease-in-out transform hover:scale-110">Contact Us</a>
      </div>
      <p class="mt-4 text-sm text-blue-800 dark:text-blue-200">&copy; 2023 Dashboard Inc. All rights reserved.</p>
    </div>
  </div>
</footer>

関連コンポーネント

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

音楽/オーディオプラットフォーム向けに設計された、ネオン/グローエフェクトを備えたレスポンシブフッターナビゲーションコンポーネント。黒と白の配色、鮮やかなアクセントカラー、ダークモードのサポート、セマンティックHTMLが特徴です。

開ける

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

マーケットプレイス向けのオーガニック/自然にインスパイアされたフッターナビゲーションコンポーネントで、流れるような線、類似の配色、複数のセクション、ダークモードをサポートするレスポンシブデザインが特徴です。

開ける

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

マーケットプレース用に設計された複雑で応答性の高いフッター ナビゲーション コンポーネントで、黒と白の配色と 1 つの明るいアクセント カラー (藍色) のダーク モード UI が特徴です。ナビゲーション、会社情報、法的リンク、ソーシャルメディアの複数のセクションが含まれており、ダークモードを完全にサポートしています。

開ける