CCHub Logo CCHub Tailwind Collection
コンポーネント サイトマップ サイトマップコンポーネント

サイトマップコンポーネント

ダーク UI とアース トーンの配色、複数のセクションとフッターを備えたエンターテイメント/メディア プラットフォーム向けのレスポンシブ サイトマップ コンポーネントで、ダーク モードをサポートします。

プレビュー

HTMLコード 

<div class="bg-gray-900 text-gray-200 font-sans p-6 md:p-10 lg:p-16 dark:bg-gray-950">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 md:gap-12">

    <!-- Section 1: Categories -->
    <div class="flex flex-col space-y-4">
      <h3 class="text-lg font-semibold text-amber-500 mb-2">Categories</h3>
      <a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Movies</a>
      <a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">TV Shows</a>
      <a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Originals</a>
      <a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Kids & Family</a>
      <a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Documentaries</a>
      <a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Sport Events</a>
    </div>

    <!-- Section 2: Explore -->
    <div class="flex flex-col space-y-4">
      <h3 class="text-lg font-semibold text-amber-500 mb-2">Explore</h3>
      <a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Trending Now</a>
      <a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">New Releases</a>
      <a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Coming Soon</a>
      <a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Browse by Genre</a>
      <a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Watchlist</a>
      <a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Top 10</a>
    </div>

    <!-- Section 3: Account & Support -->
    <div class="flex flex-col space-y-4">
      <h3 class="text-lg font-semibold text-amber-500 mb-2">Account & Support</h3>
      <a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">My Account</a>
      <a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Help Center</a>
      <a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">FAQ</a>
      <a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Contact Us</a>
      <a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Manage Devices</a>
      <a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Privacy Settings</a>
    </div>

    <!-- Section 4: Company & Legal -->
    <div class="flex flex-col space-y-4">
      <h3 class="text-lg font-semibold text-amber-500 mb-2">Company & Legal</h3>
      <a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">About Us</a>
      <a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Careers</a>
      <a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Terms of Service</a>
      <a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Privacy Policy</a>
      <a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Cookie Settings</a>
      <a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Investors</a>
    </div>

  </div>

  <hr class="border-gray-700 my-10">

  <!-- Footer Bottom -->
  <div class="max-w-7xl mx-auto text-center md:flex md:justify-between md:items-center text-sm text-gray-500">
    <div class="mb-4 md:mb-0">
      &copy; 2023 EntertainmentCo. All rights reserved.
    </div>
    <div class="flex justify-center space-x-6">
      <a href="#" class="hover:text-amber-300 transition duration-300">Facebook</a>
      <a href="#" class="hover:text-amber-300 transition duration-300">Twitter</a>
      <a href="#" class="hover:text-amber-300 transition duration-300">Instagram</a>
      <a href="#" class="hover:text-amber-300 transition duration-300">YouTube</a>
    </div>
  </div>
</div>

関連コンポーネント

ソーシャル メディア サイト マップ コンポーネント

セピア/ブラウンの色調とダークモードのサポートを備えたソーシャルメディアインターフェイス用のシンプルでレスポンシブなサイトマップコンポーネントで、微妙なホバーマイクロインタラクションが特徴です。

開ける

サイトマップコンポーネント

紙/印刷物にインスパイアされたデザインと類似の配色を備えたシンプルでレスポンシブなサイトマップコンポーネントで、ダークモードのサポートを含む製造/工業Webサイトに適しています。

開ける

サイトマップコンポーネント

Tailwind CSS を使用してマテリアル デザインの原則に基づいて設計されたサイト マップ コンポーネントで、レスポンシブ レイアウト、アニメーション、ダーク テーマのサポートが特徴です。

開ける