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

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

マテリアルデザインを使用したEコマース用のフッターナビゲーションコンポーネント - レスポンシブモードとダークモードをサポートするシンプルなコンポーネントで、補色の配色が特徴です。

プレビュー

HTMLコード 

<footer class="bg-gray-200 text-gray-700 py-8 dark:bg-gray-800 dark:text-gray-200">
  <div class="container mx-auto px-4">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <div>
        <h3 class="text-lg font-semibold mb-4">Shop</h3>
        <ul>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Men's</a></li>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Women's</a></li>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Kids'</a></li>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Sale</a></li>
        </ul>
      </div>
      <div>
        <h3 class="text-lg font-semibold mb-4">About Us</h3>
        <ul>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Our Story</a></li>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Careers</a></li>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Press</a></li>
        </ul>
      </div>
      <div>
        <h3 class="text-lg font-semibold mb-4">Customer Service</h3>
        <ul>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Contact Us</a></li>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Shipping Information</a></li>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Returns & Exchanges</a></li>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">FAQs</a></li>
        </ul>
      </div>
    </div>
    <div class="mt-8 text-center text-sm">
      <p>&copy; 2023 Your E-commerce Store. All rights reserved.</p>
    </div>
  </div>
</footer>

関連コンポーネント

レトロ/ビンテージEコマースフッター

Eコマース向けの、アースカラー、シンプルなレイアウト、レスポンシブデザイン、ダークテーマのサポートを備えたレトロ/ビンテージフッターナビゲーションコンポーネント。

開ける

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

レトロ/ビンテージ デザイン スタイルのレスポンシブ フッター ナビゲーション コンポーネントで、鮮やかな色を使用し、ソーシャル メディア インターフェイスに合わせて調整されています。

開ける

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

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

開ける