CCHub Logo CCHub Tailwind Collection
コンポーネント フッター 3Dフッターフェードイン

3Dフッターフェードイン

3Dデザイン要素とダークモードをサポートするレスポンシブフッター

プレビュー

HTMLコード 

<footer class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 py-10">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap justify-between items-center">
      <div class="w-full md:w-1/3 mb-6 md:mb-0">
        <h3 class="text-xl font-bold mb-3">3D Footer</h3>
        <p class="text-sm">Explore the depths of our amazing footer. Designed with a touch of 3D for an immersive experience.</p>
      </div>
      <div class="w-full md:w-1/3 mb-6 md:mb-0">
        <h4 class="text-lg font-semibold mb-3">Quick Links</h4>
        <ul class="space-y-2">
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Home</a></li>
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Services</a></li>
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">About Us</a></li>
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Contact</a></li>
        </ul>
      </div>
      <div class="w-full md:w-1/3">
        <h4 class="text-lg font-semibold mb-3">Contact Us</h4>
        <p class="text-sm">Email: [email protected]</p>
        <p class="text-sm">Phone: +1 234 567 890</p>
        <div class="flex mt-4 space-x-4">
          <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">
            <i class="fab fa-facebook-f"></i>
          </a>
          <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">
            <i class="fab fa-twitter"></i>
          </a>
          <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">
            <i class="fab fa-instagram"></i>
          </a>
        </div>
      </div>
    </div>
    <div class="mt-8 text-center text-sm">
      <p>&copy; 2023 3D Footer. All rights reserved.</p>
    </div>
  </div>
</footer>

関連コンポーネント

フッターコンポーネント

シンプルでクリーン、かつ信頼性の高いフッターコンポーネントは、企業/専門家の予約および予約システムに適した、微妙な虹のグラデーションの境界線とダークモードのサポートと完全な応答性を備えています。

開ける

ポートフォリオ-ミニマリスト-トライアド-コンプレックス-フッター

ポートフォリオWebサイト用の複雑でミニマリストスタイルのフッターで、トライアドの配色を使用しています。ナビゲーションリンク、ソーシャルメディアアイコン、著作権、連絡先の召喚状が含まれ、完全な応答性とダークモードがサポートされています。

開ける

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

金融および銀行インターフェース用のレスポンシブフッターコンポーネントで、補色スキーム、マテリアルデザインの原則、および完全なダークモードのサポートを特長としています。ナビゲーションリンク、ソーシャルメディアアイコン、著作権表示が含まれています。

開ける