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

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

ニューモーフィズムデザイン、単色の配色、複雑な複雑さ、ソーシャルメディアの目的を備えたフッターナビゲーションコンポーネント。ダークテーマをサポートするレスポンシブデザイン。

プレビュー

HTMLコード 

<footer class="bg-gray-200 dark:bg-gray-800 py-8 px-4">
  <div class="container mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
    <div class="neumorphic-card p-6 rounded-lg">
      <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">About Us</h3>
      <p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et est in justo feugiat consectetur.</p>
    </div>
    <div class="neumorphic-card p-6 rounded-lg">
      <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Quick Links</h3>
      <ul class="space-y-2">
        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Home</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">About</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Services</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Contact</a></li>
      </ul>
    </div>
    <div class="neumorphic-card p-6 rounded-lg">
      <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Follow Us</h3>
      <div class="flex space-x-4">
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white"><i class="fab fa-facebook-f"></i></a>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white"><i class="fab fa-twitter"></i></a>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white"><i class="fab fa-instagram"></i></a>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white"><i class="fab fa-linkedin-in"></i></a>
      </div>
    </div>
  </div>
  <div class="mt-8 text-center text-gray-600 dark:text-gray-300">
    &copy; 2023 Your Company. All rights reserved.
  </div>

  <style>
    .neumorphic-card {
      background: #e0e0e0;
      box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
    }
    .dark .neumorphic-card {
        background: #333333;
        box-shadow: 7px 7px 15px #222222, -7px -7px 15px #444444;
    }
  </style>
</footer>

関連コンポーネント

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

ダッシュボード用に設計されたレスポンシブフッターナビゲーションコンポーネントで、鮮やかな色のスキューモーフィックスタイルが特徴です。ナビゲーションリンク、ロゴ、ソーシャルメディアアイコンが含まれており、Tailwind CSSを使用した完全なダークモードがサポートされています。このデザインは、インタラクティブなホバー効果を備えた適度な複雑さを目指しています。

開ける

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

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

開ける

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

ポートフォリオWebサイトに適した、ダークテーマのレスポンシブフッターナビゲーションコンポーネント。単色のさまざまな色合いの単色の配色、一部のインタラクティブ機能を備えた中程度の複雑さが特徴で、dark: プレフィックスを使用したダーク モードのサポートなど、スタイリングに Tailwind CSS を使用します。

開ける