Components Site Map Site Map Component

Site Map Component

A responsive sitemap component for entertainment/media platforms with a dark UI and earth tone color scheme, featuring multiple sections and a footer, supporting dark mode.

Preview

HTML Code

<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>

Related Components

Glassmorphism Site Map Component

A responsive site map component with a glassmorphism design, analogous color scheme, and dark mode support, suitable for business and corporate websites.

Open

Site Map Component - Finance Banking

A simple, responsive sitemap component for finance/banking interfaces, featuring a dark mode UI with sepia/brown tones. Optimized for desktop, tablet, and mobile, with full dark mode support.

Open

Site Map Component

A responsive site map component designed with glassmorphism, featuring a frosted glass-like translucent effect and blur for a portfolio showcasing work or products. It supports a dark theme and utilizes complementary colors while maintaining a moderate complexity.

Open