Search Components

Site Map

Hierarchical display of website structure

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 Preview

                <footer class="bg-stone-800 text-stone-300 py-8 px-4 dark:bg-stone-900 dark:text-stone-400 font-sans">
  <div class="max-w-7xl mx-auto grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-y-8 gap-x-4">

    <!-- Column 1: Company -->
    <div>
      <h3 class="text-stone-100 dark:text-stone-200 font-semibold text-lg mb-4">Company</h3>
      <ul class="space-y-2 text-sm">
        <li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">About Us</a></li>
        <li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Careers</a></li>
        <li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Press</a></li>
        <li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Blog</a></li>
      </ul>
    </div>

    <!-- Column 2: Products -->
    <div>
      <h3 class="text-stone-100 dark:text-stone-200 font-semibold text-lg mb-4">Products</h3>
      <ul class="space-y-2 text-sm">
        <li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Checking Accounts</a></li>
        <li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Savings Accounts</a></li>
        <li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Credit Cards</a></li>
        <li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Loans</a></li>
        <li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Investments</a></li>
      </ul>
    </div>

    <!-- Column 3: Support -->
    <div>
      <h3 class="text-stone-100 dark:text-stone-200 font-semibold text-lg mb-4">Support</h3>
      <ul class="space-y-2 text-sm">
        <li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Help Center</a></li>
        <li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Contact Us</a></li>
        <li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">FAQs</a></li>
        <li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Security</a></li>
      </ul>
    </div>

    <!-- Column 4: Legal & Compliance -->
    <div>
      <h3 class="text-stone-100 dark:text-stone-200 font-semibold text-lg mb-4">Legal</h3>
      <ul class="space-y-2 text-sm">
        <li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Privacy Policy</a></li>
        <li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Terms of Service</a></li>
        <li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Disclosures</a></li>
        <li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Cookie Policy</a></li>
      </ul>
    </div>

    <!-- Column 5: Social Media (Optional, hidden on smaller screens for simplicity) -->
    <div class="col-span-full md:col-span-2 lg:col-span-1 lg:block hidden">
      <h3 class="text-stone-100 dark:text-stone-200 font-semibold text-lg mb-4">Follow Us</h3>
      <div class="flex space-x-4">
        <a href="#" aria-label="Facebook" class="text-stone-400 hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.776-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" aria-label="Twitter" class="text-stone-400 hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M8.29 20.251c1.378 0 2.518-.616 3.125-1.579L13.882 17.5c-1.391-.456-2.617-.92-3.83-1.428-.847-1.341-1.347-2.73-1.556-4.148C7.575 8.785 8.775 7.5 10.22 7.5h.398c.957-2.355 2.378-4.328 4.28-5.719C16.892 1.346 18.5 0 20.25 0h.008l-2.023 2.148c-1.353.947-2.457 2.05-3.35 3.322C13.864 7.28 13.5 8.946 13.5 10.5c0 1.258.291 2.451.8 3.5-.06.012-.12.02-.18.026-.826.082-1.68-.006-2.495-.262-1.996.657-3.921 1.29-5.77 1.905-.62.208-1.284.407-1.92.595-1.503.447-3.08.384-4.57.172v.008C3.12 17.652 2 19.336 2 20.25c0 1.05.908 1.758 2.022 1.758h14.075c1.07 0 1.953-.615 1.953-1.758 0-.486-.334-.94-.852-1.32-.239-.17-.506-.318-.792-.47-.468-.242-.988-.45-1.543-.635-1.97-.65-3.92-1.28-5.83-1.89-1.25-.4-2.49-.8-3.706-1.18-.86-.27-1.69-.53-2.49-.8z" />
          </svg>
        </a>
        <a href="#" aria-label="LinkedIn" class="text-stone-400 hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd" />
          </svg>
        </a>
      </div>
    </div>

  </div>

  <div class="mt-8 pt-6 border-t border-stone-700 dark:border-stone-700 text-center text-sm text-stone-400 dark:text-stone-500">
    &copy; 2023 YourBank. All rights reserved.
  </div>
</footer>

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.

Open Preview

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

Neon_Glow_Sports_Sitemap_Component

A simple, responsive sitemap component with neon/glow effects and high-contrast colors, tailored for sports/fitness applications. Includes dark mode support.

Open Preview

                <section class="relative py-12 sm:py-16 md:py-20 lg:py-24 bg-gray-950 dark:bg-black overflow-hidden">
  <div class="absolute inset-0 z-0 opacity-10">
    <div class="absolute top-0 left-0 w-2/3 h-2/3 bg-blue-600 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-pulse-slow"></div>
    <div class="absolute bottom-0 right-0 w-1/2 h-1/2 bg-purple-600 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-pulse-slow-reverse"></div>
  </div>

  <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-10 sm:mb-12 md:mb-16">
      <h2 class="text-3xl sm:text-4xl md:text-5xl font-extrabold text-white leading-tight animate-fade-in">
        <span class="block pb-2 lg:inline-block relative text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-blue-200 to-blue-400 dark:from-blue-600 dark:via-blue-400 dark:to-blue-600">
          Explore Our Arena
          <span class="absolute bottom-0 left-1/2 -translate-x-1/2 w-full h-1 bg-blue-500 rounded-full shadow-lg shadow-blue-500/50 animate-glow-line"></span>
        </span>
      </h2>
      <p class="mt-4 text-base sm:text-lg text-gray-400 max-w-3xl mx-auto animate-fade-in-delay-1">
        Navigate through our powerful features and dedicated sections for athletes and fans.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 sm:gap-8 lg:gap-10">

      <div class="group relative p-6 bg-gray-900 rounded-xl border border-transparent hover:border-blue-500 transition-all duration-300 ease-in-out shadow-lg shadow-transparent hover:shadow-blue-500/20 animate-fade-in-delay-2">
        <div class="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-gradient-to-br from-blue-600 via-purple-600 to-pink-600 blur-sm"></div>
        <div class="relative z-10 flex flex-col items-center text-center">
          <svg class="w-10 h-10 mb-4 text-blue-400 group-hover:text-white transition-colors duration-300 drop-shadow-[0_0_8px_rgba(59,130,246,0.7)] group-hover:drop-shadow-[0_0_12px_rgba(255,255,255,0.9)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
          </svg>
          <h3 class="text-xl font-semibold text-white mb-2">
            <a href="#" class="group-hover:text-blue-200 transition-colors duration-300">Team Stats</a>
          </h3>
          <p class="text-gray-400 text-sm group-hover:text-gray-200 transition-colors duration-300">In-depth performance analytics.</p>
        </div>
      </div>

      <div class="group relative p-6 bg-gray-900 rounded-xl border border-transparent hover:border-purple-500 transition-all duration-300 ease-in-out shadow-lg shadow-transparent hover:shadow-purple-500/20 animate-fade-in-delay-3">
        <div class="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-gradient-to-br from-blue-600 via-purple-600 to-pink-600 blur-sm"></div>
        <div class="relative z-10 flex flex-col items-center text-center">
          <svg class="w-10 h-10 mb-4 text-purple-400 group-hover:text-white transition-colors duration-300 drop-shadow-[0_0_8px_rgba(168,85,247,0.7)] group-hover:drop-shadow-[0_0_12px_rgba(255,255,255,0.9)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h-2A4 4 0 0111 16V8a4 4 0 014-4h2a4 4 0 014 4v8a4 4 0 01-4 4z"></path>
          </svg>
          <h3 class="text-xl font-semibold text-white mb-2">
            <a href="#" class="group-hover:text-purple-200 transition-colors duration-300">Player Profiles</a>
          </h3>
          <p class="text-gray-400 text-sm group-hover:text-gray-200 transition-colors duration-300">Detailed athlete information.</p>
        </div>
      </div>

      <div class="group relative p-6 bg-gray-900 rounded-xl border border-transparent hover:border-pink-500 transition-all duration-300 ease-in-out shadow-lg shadow-transparent hover:shadow-pink-500/20 animate-fade-in-delay-4">
        <div class="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-gradient-to-br from-blue-600 via-purple-600 to-pink-600 blur-sm"></div>
        <div class="relative z-10 flex flex-col items-center text-center">
          <svg class="w-10 h-10 mb-4 text-pink-400 group-hover:text-white transition-colors duration-300 drop-shadow-[0_0_8px_rgba(236,72,153,0.7)] group-hover:drop-shadow-[0_0_12px_rgba(255,255,255,0.9)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
          </svg>
          <h3 class="text-xl font-semibold text-white mb-2">
            <a href="#" class="group-hover:text-pink-200 transition-colors duration-300">Upcoming Games</a>
          </h3>
          <p class="text-gray-400 text-sm group-hover:text-gray-200 transition-colors duration-300">Never miss a match.</p>
        </div>
      </div>

      <div class="group relative p-6 bg-gray-900 rounded-xl border border-transparent hover:border-green-500 transition-all duration-300 ease-in-out shadow-lg shadow-transparent hover:shadow-green-500/20 animate-fade-in-delay-5">
        <div class="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-gradient-to-br from-blue-600 via-purple-600 to-pink-600 blur-sm"></div>
        <div class="relative z-10 flex flex-col items-center text-center">
          <svg class="w-10 h-10 mb-4 text-green-400 group-hover:text-white transition-colors duration-300 drop-shadow-[0_0_8px_rgba(34,197,94,0.7)] group-hover:drop-shadow-[0_0_12px_rgba(255,255,255,0.9)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18S13.168 18.477 12 19.253"></path>
          </svg>
          <h3 class="text-xl font-semibold text-white mb-2">
            <a href="#" class="group-hover:text-green-200 transition-colors duration-300">Fan Zone</a>
          </h3>
          <p class="text-gray-400 text-sm group-hover:text-gray-200 transition-colors duration-300">Connect with fellow enthusiasts.</p>
        </div>
      </div>

      <div class="group relative p-6 bg-gray-900 rounded-xl border border-transparent hover:border-indigo-500 transition-all duration-300 ease-in-out shadow-lg shadow-transparent hover:shadow-indigo-500/20 animate-fade-in-delay-6">
        <div class="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-gradient-to-br from-blue-600 via-purple-600 to-pink-600 blur-sm"></div>
        <div class="relative z-10 flex flex-col items-center text-center">
          <svg class="w-10 h-10 mb-4 text-indigo-400 group-hover:text-white transition-colors duration-300 drop-shadow-[0_0_8px_rgba(99,102,241,0.7)] group-hover:drop-shadow-[0_0_12px_rgba(255,255,255,0.9)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h14a2 2 0 012 2v2a2 2 0 01-2 2H5a2 2 0 01-2-2V5zm0 8a2 2 0 012-2h14a2 2 0 012 2v2a2 2 0 01-2 2H5a2 2 0 01-2-2v-2zm0 8a2 2 0 012-2h14a2 2 0 012 2v2a2 2 0 01-2 2H5a2 2 0 01-2-2v-2z"></path>
          </svg>
          <h3 class="text-xl font-semibold text-white mb-2">
            <a href="#" class="group-hover:text-indigo-200 transition-colors duration-300">Training Logs</a>
          </h3>
          <p class="text-gray-400 text-sm group-hover:text-gray-200 transition-colors duration-300">Track your progress.</p>
        </div>
      </div>

      <div class="group relative p-6 bg-gray-900 rounded-xl border border-transparent hover:border-red-500 transition-all duration-300 ease-in-out shadow-lg shadow-transparent hover:shadow-red-500/20 animate-fade-in-delay-7">
        <div class="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-gradient-to-br from-blue-600 via-purple-600 to-pink-600 blur-sm"></div>
        <div class="relative z-10 flex flex-col items-center text-center">
          <svg class="w-10 h-10 mb-4 text-red-400 group-hover:text-white transition-colors duration-300 drop-shadow-[0_0_8px_rgba(239,68,68,0.7)] group-hover:drop-shadow-[0_0_12px_rgba(255,255,255,0.9)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
          </svg>
          <h3 class="text-xl font-semibold text-white mb-2">
            <a href="#" class="group-hover:text-red-200 transition-colors duration-300">Club Store</a>
          </h3>
          <p class="text-gray-400 text-sm group-hover:text-gray-200 transition-colors duration-300">Gear up for glory.</p>
        </div>
      </div>

      <div class="group relative p-6 bg-gray-900 rounded-xl border border-transparent hover:border-yellow-500 transition-all duration-300 ease-in-out shadow-lg shadow-transparent hover:shadow-yellow-500/20 animate-fade-in-delay-8">
        <div class="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-gradient-to-br from-blue-600 via-purple-600 to-pink-600 blur-sm"></div>
        <div class="relative z-10 flex flex-col items-center text-center">
          <svg class="w-10 h-10 mb-4 text-yellow-400 group-hover:text-white transition-colors duration-300 drop-shadow-[0_0_8px_rgba(251,191,36,0.7)] group-hover:drop-shadow-[0_0_12px_rgba(255,255,255,0.9)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h10m-9 4h4M6 16.5V20a2 2 0 002 2h8a2 2 0 002-2v-3.5M4 7V4a2 2 0 012-2h12a2 2 0 012 2v3M3 10h18"></path>
          </svg>
          <h3 class="text-xl font-semibold text-white mb-2">
            <a href="#" class="group-hover:text-yellow-200 transition-colors duration-300">Contact Us</a>
          </h3>
          <p class="text-gray-400 text-sm group-hover:text-gray-200 transition-colors duration-300">Get in touch with the team.</p>
        </div>
      </div>

    </div>
  </div>

  <style>
    @keyframes pulse-slow {
      0% { transform: scale(1); opacity: 0.3; }
      50% { transform: scale(1.05); opacity: 0.4; }
      100% { transform: scale(1); opacity: 0.3; }
    }
    @keyframes pulse-slow-reverse {
      0% { transform: scale(1); opacity: 0.3; }
      50% { transform: scale(0.95); opacity: 0.4; }
      100% { transform: scale(1); opacity: 0.3; }
    }
    @keyframes fade-in {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    /* Delay animations using different keyframes or utility classes */
    .animate-fade-in { animation: fade-in 0.8s ease-out forwards; opacity: 0; }
    .animate-fade-in-delay-1 { animation: fade-in 0.8s ease-out 0.2s forwards; opacity: 0; }
    .animate-fade-in-delay-2 { animation: fade-in 0.8s ease-out 0.4s forwards; opacity: 0; }
    .animate-fade-in-delay-3 { animation: fade-in 0.8s ease-out 0.6s forwards; opacity: 0; }
    .animate-fade-in-delay-4 { animation: fade-in 0.8s ease-out 0.8s forwards; opacity: 0; }
    .animate-fade-in-delay-5 { animation: fade-in 0.8s ease-out 1.0s forwards; opacity: 0; }
    .animate-fade-in-delay-6 { animation: fade-in 0.8s ease-out 1.2s forwards; opacity: 0; }
    .animate-fade-in-delay-7 { animation: fade-in 0.8s ease-out 1.4s forwards; opacity: 0; }
    .animate-fade-in-delay-8 { animation: fade-in 0.8s ease-out 1.6s forwards; opacity: 0; }

    @keyframes glow-line {
      0% { width: 0; opacity: 0; }
      50% { width: 100%; opacity: 1; }
      100% { width: 0; opacity: 0; }
    }

    /* Apply animations */
    .animate-pulse-slow { animation: pulse-slow 6s infinite ease-in-out; }
    .animate-pulse-slow-reverse { animation: pulse-slow-reverse 6s infinite ease-in-out; }
    .animate-glow-line { animation: glow-line 3s infinite ease-in-out; }

    /* Dark mode adjustments for glow */
    .dark .group-hover\:opacity-100 {
        background: linear-gradient(to br, var(--tw-gradient-stops));
    }
    .dark .group-hover\:shadow-blue-500\/20 {
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.4) !important;
    }
    .dark .group-hover\:shadow-purple-500\/20 {
        box-shadow: 0 0 20px rgba(168, 85, 247, 0.4) !important;
    }
    .dark .group-hover\:shadow-pink-500\/20 {
        box-shadow: 0 0 20px rgba(236, 72, 153, 0.4) !important;
    }
    .dark .group-hover\:shadow-green-500\/20 {
        box-shadow: 0 0 20px rgba(34, 197, 94, 0.4) !important;
    }
    .dark .group-hover\:shadow-indigo-500\/20 {
        box-shadow: 0 0 20px rgba(99, 102, 241, 0.4) !important;
    }
    .dark .group-hover\:shadow-red-500\/20 {
        box-shadow: 0 0 20px rgba(239, 68, 68, 0.4) !important;
    }
    .dark .group-hover\:shadow-yellow-500\/20 {
        box-shadow: 0 0 20px rgba(251, 191, 36, 0.4) !important;
    }
  </style>
</section>

Site Map Component

A responsive sitemap component with a Material Design aesthetic, pastel color scheme, and support for dark mode, suitable for dating/social platforms.

Open Preview

                <div class="bg-gradient-to-br from-purple-100 via-pink-100 to-yellow-100 dark:from-purple-900 dark:via-pink-900 dark:to-yellow-900 min-h-screen p-4 sm:p-6 md:p-8 flex items-center justify-center font-sans">
  <div class="bg-white dark:bg-gray-800 rounded-xl shadow-2xl p-6 sm:p-8 md:p-10 lg:p-12 w-full max-w-6xl transition-all duration-300 ease-in-out">
    <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold text-center mb-10 text-purple-600 dark:text-purple-300 drop-shadow-lg leading-tight">
      <span class="block">Explore Our World</span> <span class="text-pink-500 dark:text-pink-400">Find Your Match</span>
    </h1>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8 md:gap-10">

      <!-- Section 1: About Us -->
      <div class="bg-purple-50 dark:bg-gray-700 rounded-lg p-5 shadow-md hover:shadow-lg transition-shadow duration-300 border-b-4 border-purple-300 dark:border-purple-600">
        <h2 class="text-2xl font-bold mb-4 text-purple-700 dark:text-purple-200">About Us</h2>
        <ul class="space-y-2 text-md text-gray-700 dark:text-gray-300">
          <li><a href="#" class="hover:text-purple-500 dark:hover:text-purple-400 transform hover:translate-x-1 transition-transform duration-200 block">Our Story</a></li>
          <li><a href="#" class="hover:text-purple-500 dark:hover:text-purple-400 transform hover:translate-x-1 transition-transform duration-200 block">Mission & Values</a></li>
          <li><a href="#" class="hover:text-purple-500 dark:hover:text-purple-400 transform hover:translate-x-1 transition-transform duration-200 block">Team</a></li>
          <li><a href="#" class="hover:text-purple-500 dark:hover:text-purple-400 transform hover:translate-x-1 transition-transform duration-200 block">Careers</a></li>
        </ul>
      </div>

      <!-- Section 2: Discover -->
      <div class="bg-pink-50 dark:bg-gray-700 rounded-lg p-5 shadow-md hover:shadow-lg transition-shadow duration-300 border-b-4 border-pink-300 dark:border-pink-600">
        <h2 class="text-2xl font-bold mb-4 text-pink-700 dark:text-pink-200">Discover</h2>
        <ul class="space-y-2 text-md text-gray-700 dark:text-gray-300">
          <li><a href="#" class="hover:text-pink-500 dark:hover:text-pink-400 transform hover:translate-x-1 transition-transform duration-200 block">Browse Profiles</a></li>
          <li><a href="#" class="hover:text-pink-500 dark:hover:text-pink-400 transform hover:translate-x-1 transition-transform duration-200 block">Local Matches</a></li>
          <li><a href="#" class="hover:text-pink-500 dark:hover:text-pink-400 transform hover:translate-x-1 transition-transform duration-200 block">Zodiac Compatibility</a></li>
          <li><a href="#" class="hover:text-pink-500 dark:hover:text-pink-400 transform hover:translate-x-1 transition-transform duration-200 block">Success Stories</a></li>
        </ul>
        <div class="mt-4">
          <img src="https://picsum.photos/id/1025/150/100" alt="Love in the Air" class="rounded-md shadow-sm w-full h-24 object-cover">
        </div>
      </div>

      <!-- Section 3: Features -->
      <div class="bg-yellow-50 dark:bg-gray-700 rounded-lg p-5 shadow-md hover:shadow-lg transition-shadow duration-300 border-b-4 border-yellow-300 dark:border-yellow-600">
        <h2 class="text-2xl font-bold mb-4 text-yellow-700 dark:text-yellow-200">Features</h2>
        <ul class="space-y-2 text-md text-gray-700 dark:text-gray-300">
          <li><a href="#" class="hover:text-yellow-500 dark:hover:text-yellow-400 transform hover:translate-x-1 transition-transform duration-200 block">Messaging & Chat</a></li>
          <li><a href="#" class="hover:text-yellow-500 dark:hover:text-yellow-400 transform hover:translate-x-1 transition-transform duration-200 block">Video Dates</a></li>
          <li><a href="#" class="hover:text-yellow-500 dark:hover:text-yellow-400 transform hover:translate-x-1 transition-transform duration-200 block">Icebreakers</a></li>
          <li><a href="#" class="hover:text-yellow-500 dark:hover:text-yellow-400 transform hover:translate-x-1 transition-transform duration-200 block">Profile Boosts</a></li>
          <li><a href="#" class="hover:text-yellow-500 dark:hover:text-yellow-400 transform hover:translate-x-1 transition-transform duration-200 block">Moderation</a></li>
        </ul>
      </div>

      <!-- Section 4: Support & Legal -->
      <div class="bg-blue-50 dark:bg-gray-700 rounded-lg p-5 shadow-md hover:shadow-lg transition-shadow duration-300 border-b-4 border-blue-300 dark:border-blue-600">
        <h2 class="text-2xl font-bold mb-4 text-blue-700 dark:text-blue-200">Help & Legal</h2>
        <ul class="space-y-2 text-md text-gray-700 dark:text-gray-300">
          <li><a href="#" class="hover:text-blue-500 dark:hover:text-blue-400 transform hover:translate-x-1 transition-transform duration-200 block">FAQ</a></li>
          <li><a href="#" class="hover:text-blue-500 dark:hover:text-blue-400 transform hover:translate-x-1 transition-transform duration-200 block">Contact Us</a></li>
          <li><a href="#" class="hover:text-blue-500 dark:hover:text-blue-400 transform hover:translate-x-1 transition-transform duration-200 block">Terms of Service</a></li>
          <li><a href="#" class="hover:text-blue-500 dark:hover:text-blue-400 transform hover:translate-x-1 transition-transform duration-200 block">Privacy Policy</a></li>
          <li><a href="#" class="hover:text-blue-500 dark:hover:text-blue-400 transform hover:translate-x-1 transition-transform duration-200 block">Safety Tips</a></li>
        </ul>
      </div>

      <!-- Section 5: Community & Blog (Spans 2 columns on larger screens) -->
      <div class="lg:col-span-2 bg-green-50 dark:bg-gray-700 rounded-lg p-5 shadow-md hover:shadow-lg transition-shadow duration-300 border-b-4 border-green-300 dark:border-green-600 relative overflow-hidden group">
        <h2 class="text-2xl font-bold mb-4 text-green-700 dark:text-green-200">Community & Blog</h2>
        <ul class="grid grid-cols-1 sm:grid-cols-2 gap-y-2 gap-x-6 text-md text-gray-700 dark:text-gray-300 relative z-10">
          <li><a href="#" class="hover:text-green-500 dark:hover:text-green-400 transform hover:translate-x-1 transition-transform duration-200 block">User Forums</a></li>
          <li><a href="#" class="hover:text-green-500 dark:hover:text-green-400 transform hover:translate-x-1 transition-transform duration-200 block">Dating Advice</a></li>
          <li><a href="#" class="hover:text-green-500 dark:hover:text-green-400 transform hover:translate-x-1 transition-transform duration-200 block">Events & Meetups</a></li>
          <li><a href="#" class="hover:text-green-500 dark:hover:text-green-400 transform hover:translate-x-1 transition-transform duration-200 block">Success Stories</a></li>
          <li><a href="#" class="hover:text-green-500 dark:hover:text-green-400 transform hover:translate-x-1 transition-transform duration-200 block">Love Stories (Blog)</a></li>
          <li><a href="#" class="hover:text-green-500 dark:hover:text-green-400 transform hover:translate-x-1 transition-transform duration-200 block">Podcast</a></li>
        </ul>
        <div class="absolute -bottom-4 -right-4 w-24 h-24 bg-green-200 dark:bg-green-800 rounded-full opacity-30 group-hover:opacity-60 transition-opacity duration-300 blur-md"></div>
        <div class="absolute -top-2 -left-2 w-16 h-16 bg-green-200 dark:bg-green-800 rounded-full opacity-20 group-hover:opacity-50 transition-opacity duration-300 blur-md"></div>
      </div>

      <!-- Section 6: User Settings (Includes an avatar) -->
      <div class="bg-indigo-50 dark:bg-gray-700 rounded-lg p-5 shadow-md hover:shadow-lg transition-shadow duration-300 border-b-4 border-indigo-300 dark:border-indigo-600 flex flex-col items-center text-center">
        <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-20 h-20 rounded-full object-cover mb-4 border-4 border-indigo-400 dark:border-indigo-500 shadow-md">
        <h2 class="text-2xl font-bold mb-4 text-indigo-700 dark:text-indigo-200">Your Account</h2>
        <ul class="space-y-2 text-md text-gray-700 dark:text-gray-300">
          <li><a href="#" class="hover:text-indigo-500 dark:hover:text-indigo-400 transform hover:translate-x-1 transition-transform duration-200 block">Profile Settings</a></li>
          <li><a href="#" class="hover:text-indigo-500 dark:hover:text-indigo-400 transform hover:translate-x-1 transition-transform duration-200 block">Privacy Preferences</a></li>
          <li><a href="#" class="hover:text-indigo-500 dark:hover:text-indigo-400 transform hover:translate-x-1 transition-transform duration-200 block">Notifications</a></li>
          <li><a href="#" class="hover:text-indigo-500 dark:hover:text-indigo-400 transform hover:translate-x-1 transition-transform duration-200 block">Subscription</a></li>
          <li><a href="#" class="hover:text-indigo-500 dark:hover:text-indigo-400 transform hover:translate-x-1 transition-transform duration-200 block">Logout</a></li>
        </ul>
      </div>

      <!-- Section 7: Mobile Apps -->
      <div class="bg-red-50 dark:bg-gray-700 rounded-lg p-5 shadow-md hover:shadow-lg transition-shadow duration-300 border-b-4 border-red-300 dark:border-red-600">
        <h2 class="text-2xl font-bold mb-4 text-red-700 dark:text-red-200">Mobile Apps</h2>
        <ul class="space-y-2 text-md text-gray-700 dark:text-gray-300">
          <li><a href="#" class="hover:text-red-500 dark:hover:text-red-400 transform hover:translate-x-1 transition-transform duration-200 block">iOS App</a></li>
          <li><a href="#" class="hover:text-red-500 dark:hover:text-red-400 transform hover:translate-x-1 transition-transform duration-200 block">Android App</a></li>
          <li><a href="#" class="hover:text-red-500 dark:hover:text-red-400 transform hover:translate-x-1 transition-transform duration-200 block">App Features</a></li>
        </ul>
        <div class="mt-4 flex justify-around">
          <img src="https://picsum.photos/id/83/60/60" alt="App Store" class="rounded-lg shadow-sm">
          <img src="https://picsum.photos/id/95/60/60" alt="Google Play" class="rounded-lg shadow-sm">
        </div>
      </div>

    </div>

    <div class="mt-12 text-center text-md text-gray-600 dark:text-gray-400">
      <p>&copy; 2023 LoveConnect. All rights reserved. <span class="hidden sm:inline">Designed with ❤️ for finding your perfect match.</span></p>
    </div>
  </div>
</div>

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 Preview

                <div class="min-h-screen bg-gradient-to-br from-green-50 to-blue-50 py-12 px-4 sm:px-6 lg:px-8 dark:from-gray-900 dark:to-green-950">
  <div class="max-w-7xl mx-auto dark:text-gray-200">
    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center text-gray-900 mb-12 dark:text-white">
      Explore Our Site
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Column 1: Company -->
      <div class="relative p-8 rounded-3xl overflow-hidden shadow-xl border border-white border-opacity-30 backdrop-filter backdrop-blur-lg backdrop-saturate-180 bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 hover:shadow-2xl">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-300 to-green-300 opacity-20 dark:from-purple-900 dark:to-blue-900 rounded-3xl"></div>
        <div class="relative z-10">
          <h3 class="text-2xl font-bold mb-4 text-green-900 dark:text-emerald-500">Company</h3>
          <ul class="space-y-3">
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">About Us</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Our Mission</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Team</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Careers</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Contact Us</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Press & Media</a></li>
          </ul>
        </div>
      </div>

      <!-- Column 2: Services & Solutions -->
      <div class="relative p-8 rounded-3xl overflow-hidden shadow-xl border border-white border-opacity-30 backdrop-filter backdrop-blur-lg backdrop-saturate-180 bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 hover:shadow-2xl">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-300 to-green-300 opacity-20 dark:from-purple-900 dark:to-blue-900 rounded-3xl"></div>
        <div class="relative z-10">
          <h3 class="text-2xl font-bold mb-4 text-green-900 dark:text-emerald-500">Services & Solutions</h3>
          <ul class="space-y-3">
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Enterprise Solutions</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Data Analytics</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Cloud Computing</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Cybersecurity</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Consulting</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Managed Services</a></li>
          </ul>
        </div>
      </div>

      <!-- Column 3: Resources & News -->
      <div class="relative p-8 rounded-3xl overflow-hidden shadow-xl border border-white border-opacity-30 backdrop-filter backdrop-blur-lg backdrop-saturate-180 bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 hover:shadow-2xl">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-300 to-green-300 opacity-20 dark:from-purple-900 dark:to-blue-900 rounded-3xl"></div>
        <div class="relative z-10">
          <h3 class="text-2xl font-bold mb-4 text-green-900 dark:text-emerald-500">Resources & News</h3>
          <ul class="space-y-3">
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Blog</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Case Studies</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Whitepapers</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Webinars</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">FAQ</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Latest News</a></li>
          </ul>
        </div>
      </div>

      <!-- Column 4: Support -->
      <div class="relative p-8 rounded-3xl overflow-hidden shadow-xl border border-white border-opacity-30 backdrop-filter backdrop-blur-lg backdrop-saturate-180 bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 hover:shadow-2xl">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-300 to-green-300 opacity-20 dark:from-purple-900 dark:to-blue-900 rounded-3xl"></div>
        <div class="relative z-10">
          <h3 class="text-2xl font-bold mb-4 text-green-900 dark:text-emerald-500">Support</h3>
          <ul class="space-y-3">
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Help Center</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Submit a Ticket</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Documentation</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Service Status</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Partnerships</a></li>
          </ul>
        </div>
      </div>

      <!-- Column 5: Legal -->
      <div class="relative p-8 rounded-3xl overflow-hidden shadow-xl border border-white border-opacity-30 backdrop-filter backdrop-blur-lg backdrop-saturate-180 bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 hover:shadow-2xl">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-300 to-green-300 opacity-20 dark:from-purple-900 dark:to-blue-900 rounded-3xl"></div>
        <div class="relative z-10">
          <h3 class="text-2xl font-bold mb-4 text-green-900 dark:text-emerald-500">Legal</h3>
          <ul class="space-y-3">
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Privacy Policy</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Terms of Service</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Cookie Policy</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Legal Disclaimers</a></li>
          </ul>
        </div>
      </div>

      <!-- Column 6: Industries (Example with Image) -->
      <div class="relative p-8 rounded-3xl overflow-hidden shadow-xl border border-white border-opacity-30 backdrop-filter backdrop-blur-lg backdrop-saturate-180 bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 flex flex-col justify-between transform transition duration-500 hover:scale-105 hover:shadow-2xl">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-300 to-green-300 opacity-20 dark:from-purple-900 dark:to-blue-900 rounded-3xl"></div>
        <div class="relative z-10 flex-grow">
          <h3 class="text-2xl font-bold mb-4 text-green-900 dark:text-emerald-500">Industries</h3>
          <ul class="space-y-3 mb-6">
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Finance</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Healthcare</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Retail</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Manufacturing</a></li>
          </ul>
        </div>
        <div class="relative z-10 mt-auto">
          <img src="https://picsum.photos/400/250" alt="Placeholder Image for Industries" class="rounded-xl shadow-lg w-full h-auto object-cover">
        </div>
      </div>

    </div>
  </div>
</div>

Site Map Component

A simple, vibrant 3D-inspired site map component for portfolios, with responsive design and dark mode support using Tailwind CSS.

Open Preview

                
<div class="dark:bg-gray-900 bg-gray-100 p-8 min-h-screen">
  <div class="container mx-auto">
    <h1 class="text-4xl font-bold mb-8 text-center dark:text-white text-gray-800">Site Map</h1>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Section 1: About Me -->
      <div class="bg-gradient-to-br from-purple-500 to-pink-500 rounded-lg shadow-xl p-6 transform hover:scale-105 transition-transform duration-300 dark:from-purple-700 dark:to-pink-700">
        <h2 class="text-2xl font-semibold mb-4 text-white">About Me</h2>
        <ul class="space-y-2">
          <li><a href="#" class="text-white hover:text-purple-200 transition-colors duration-200 block">Introduction</a></li>
          <li><a href="#" class="text-white hover:text-purple-200 transition-colors duration-200 block">Skills</a></li>
          <li><a href="#" class="text-white hover:text-purple-200 transition-colors duration-200 block">Experience</a></li>
        </ul>
      </div>

      <!-- Section 2: Portfolio -->
      <div class="bg-gradient-to-br from-green-400 to-blue-500 rounded-lg shadow-xl p-6 transform hover:scale-105 transition-transform duration-300 dark:from-green-600 dark:to-blue-600">
        <h2 class="text-2xl font-semibold mb-4 text-white">Portfolio</h2>
        <ul class="space-y-2">
          <li><a href="#" class="text-white hover:text-green-100 transition-colors duration-200 block">Web Design</a></li>
          <li><a href="#" class="text-white hover:text-green-100 transition-colors duration-200 block">Graphic Design</a></li>
          <li><a href="#" class="text-white hover:text-green-100 transition-colors duration-200 block">Photography</a></li>
        </ul>
      </div>

      <!-- Section 3: Blog -->
      <div class="bg-gradient-to-br from-yellow-400 to-orange-500 rounded-lg shadow-xl p-6 transform hover:scale-105 transition-transform duration-300 dark:from-yellow-600 dark:to-orange-600">
        <h2 class="text-2xl font-semibold mb-4 text-white">Blog</h2>
        <ul class="space-y-2">
          <li><a href="#" class="text-white hover:text-yellow-100 transition-colors duration-200 block">Latest Posts</a></li>
          <li><a href="#" class="text-white hover:text-yellow-100 transition-colors duration-200 block">Categories</a></li>
          <li><a href="#" class="text-white hover:text-yellow-100 transition-colors duration-200 block">Archive</a></li>
        </ul>
      </div>

      <!-- Section 4: Services (Example) -->
      <div class="bg-gradient-to-br from-red-500 to-orange-600 rounded-lg shadow-xl p-6 transform hover:scale-105 transition-transform duration-300 dark:from-red-700 dark:to-orange-700">
        <h2 class="text-2xl font-semibold mb-4 text-white">Services</h2>
        <ul class="space-y-2">
          <li><a href="#" class="text-white hover:text-red-200 transition-colors duration-200 block">Consulting</a></li>
          <li><a href="#" class="text-white hover:text-red-200 transition-colors duration-200 block">Development</a></li>
          <li><a href="#" class="text-white hover:text-red-200 transition-colors duration-200 block">Support</a></li>
        </ul>
      </div>

      <!-- Section 5: Contact -->
      <div class="bg-gradient-to-br from-blue-600 to-indigo-700 rounded-lg shadow-xl p-6 transform hover:scale-105 transition-transform duration-300 dark:from-blue-800 dark:to-indigo-800">
        <h2 class="text-2xl font-semibold mb-4 text-white">Contact</h2>
        <ul class="space-y-2">
          <li><a href="#" class="text-white hover:text-blue-200 transition-colors duration-200 block">Get in Touch</a></li>
          <li><a href="#" class="text-white hover:text-blue-200 transition-colors duration-200 block">Social Media</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

A responsive sitemap component with microinteractions, pastel color scheme, and dark theme support, suitable for e-commerce websites. It includes a header, a search bar, and several categories with links.

Open Preview

                
<div class="bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-900 dark:to-purple-950 min-h-screen p-8">
  <div class="container mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 transform transition duration-300 hover:scale-[1.01]">
    <h1 class="text-4xl font-extrabold text-gray-800 dark:text-white mb-8 text-center">Site Map</h1>

    <!-- Search Bar -->
    <div class="mb-8 relative">
      <input type="text" placeholder="Search sitemap..." class="w-full p-4 pl-12 rounded-full bg-purple-50 dark:bg-gray-700 text-gray-700 dark:text-white focus:outline-none focus:ring-4 focus:ring-purple-200 dark:focus:ring-purple-700 transition duration-300">
      <svg class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="11" cy="11" r="8"></circle>
        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
      </svg>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Category 1 -->
      <div class="bg-purple-100 dark:bg-gray-700 rounded-lg p-6 shadow-md transform transition duration-300 hover:shadow-lg hover:-translate-y-1">
        <h2 class="text-2xl font-semibold text-purple-800 dark:text-purple-300 mb-4">Shop</h2>
        <ul class="space-y-3">
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition duration-200 block">All Products</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition duration-200 block">New Arrivals</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition duration-200 block">Best Sellers</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition duration-200 block">On Sale</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition duration-200 block">Gift Cards</a></li>
        </ul>
      </div>

      <!-- Category 2 -->
      <div class="bg-pink-100 dark:bg-gray-700 rounded-lg p-6 shadow-md transform transition duration-300 hover:shadow-lg hover:-translate-y-1">
        <h2 class="text-2xl font-semibold text-pink-800 dark:text-pink-300 mb-4">My Account</h2>
        <ul class="space-y-3">
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-pink-600 dark:hover:text-pink-400 transition duration-200 block">Dashboard</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-pink-600 dark:hover:text-pink-400 transition duration-200 block">Order History</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-pink-600 dark:hover:text-pink-400 transition duration-200 block">Wishlist</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-pink-600 dark:hover:text-pink-400 transition duration-200 block">Addresses</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-pink-600 dark:hover:text-pink-400 transition duration-200 block">Payment Methods</a></li>
        </ul>
      </div>

      <!-- Category 3 -->
      <div class="bg-blue-100 dark:bg-gray-700 rounded-lg p-6 shadow-md transform transition duration-300 hover:shadow-lg hover:-translate-y-1">
        <h2 class="text-2xl font-semibold text-blue-800 dark:text-blue-300 mb-4">Customer Service</h2>
        <ul class="space-y-3">
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-200 block">Contact Us</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-200 block">FAQs</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-200 block">Shipping & Returns</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-200 block">Privacy Policy</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-200 block">Terms of Service</a></li>
        </ul>
      </div>

      <!-- Category 4 -->
      <div class="bg-green-100 dark:bg-gray-700 rounded-lg p-6 shadow-md transform transition duration-300 hover:shadow-lg hover:-translate-y-1">
        <h2 class="text-2xl font-semibold text-green-800 dark:text-green-300 mb-4">About Us</h2>
        <ul class="space-y-3">
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-green-600 dark:hover:text-green-400 transition duration-200 block">Our Story</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-green-600 dark:hover:text-green-400 transition duration-200 block">Careers</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-green-600 dark:hover:text-green-400 transition duration-200 block">Blog</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-green-600 dark:hover:text-green-400 transition duration-200 block">Press</a></li>
        </ul>
      </div>

      <!-- Category 5 -->
      <div class="bg-yellow-100 dark:bg-gray-700 rounded-lg p-6 shadow-md transform transition duration-300 hover:shadow-lg hover:-translate-y-1">
        <h2 class="text-2xl font-semibold text-yellow-800 dark:text-yellow-300 mb-4">Connect</h2>
        <ul class="space-y-3">
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-yellow-600 dark:hover:text-yellow-400 transition duration-200 block">Facebook</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-yellow-600 dark:hover:text-yellow-400 transition duration-200 block">Instagram</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-yellow-600 dark:hover:text-yellow-400 transition duration-200 block">Twitter</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-yellow-600 dark:hover:text-yellow-400 transition duration-200 block">Pinterest</a></li>
        </ul>
      </div>

      <!-- Category 6 - Example of more links if needed -->
      <div class="bg-red-100 dark:bg-gray-700 rounded-lg p-6 shadow-md transform transition duration-300 hover:shadow-lg hover:-translate-y-1">
        <h2 class="text-2xl font-semibold text-red-800 dark:text-red-300 mb-4">Collaborations</h2>
        <ul class="space-y-3">
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-400 transition duration-200 block">Partnerships</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-400 transition duration-200 block">Affiliate Program</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-400 transition duration-200 block">Wholesale Inquiries</a></li>
        </ul>
      </div>

    </div>
  </div>
</div>

Site Map Component

A retro/vintage site map component designed for social media interfaces, using a monochromatic color scheme. It features a simple layout with a dark theme for better readability and aesthetic appeal.

Open Preview

                <div class="max-w-4xl mx-auto p-6 bg-gray-900 dark:bg-gray-800 rounded-lg shadow-md">
    <h1 class="text-4xl text-white font-bold text-center mb-6">Site Map</h1>
    <ul class="list-disc list-inside space-y-4">
        <li class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile Picture" class="w-12 h-12 rounded-full border-2 border-gray-600">
            <div>
                <a href="#" class="text-white hover:text-gray-400">Home</a>
                <p class="text-gray-400 text-sm">Our homepage with latest updates</p>
            </div>
        </li>
        <li class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Profile Picture" class="w-12 h-12 rounded-full border-2 border-gray-600">
            <div>
                <a href="#" class="text-white hover:text-gray-400">Profile</a>
                <p class="text-gray-400 text-sm">Your personal profile page</p>
            </div>
        </li>
        <li class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/men/33.jpg" alt="Profile Picture" class="w-12 h-12 rounded-full border-2 border-gray-600">
            <div>
                <a href="#" class="text-white hover:text-gray-400">Messages</a>
                <p class="text-gray-400 text-sm">View your messages</p>
            </div>
        </li>
        <li class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Profile Picture" class="w-12 h-12 rounded-full border-2 border-gray-600">
            <div>
                <a href="#" class="text-white hover:text-gray-400">Settings</a>
                <p class="text-gray-400 text-sm">Manage your account settings</p>
            </div>
        </li>
    </ul>
    <div class="mt-6">
        <h2 class="text-2xl text-white font-bold mb-2">Gallery</h2>
        <div class="grid grid-cols-2 gap-4">  
            <img src="https://picsum.photos/200/200?random=1" alt="Gallery Image 1" class="rounded-lg">
            <img src="https://picsum.photos/200/200?random=2" alt="Gallery Image 2" class="rounded-lg">
            <img src="https://picsum.photos/200/200?random=3" alt="Gallery Image 3" class="rounded-lg">
            <img src="https://picsum.photos/200/200?random=4" alt="Gallery Image 4" class="rounded-lg">
        </div>
    </div>
</div>

Site Map Component

A responsive Site Map component styled with Material Design principles and optimized for e-commerce, featuring pastel colors and dark mode support.

Open Preview

                <div class="bg-white dark:bg-gray-800 p-6 rounded-md shadow-md">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-100">Site Map</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="p-4 bg-blue-100 dark:bg-blue-900 rounded shadow">
            <h3 class="font-semibold text-lg text-blue-800 dark:text-blue-200">Products</h3>
            <ul class="mt-2">
                <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">New Arrivals</a></li>
                <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Featured</a></li>
                <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Best Sellers</a></li>
                <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Sales</a></li>
            </ul>
        </div>
        <div class="p-4 bg-green-100 dark:bg-green-900 rounded shadow">
            <h3 class="font-semibold text-lg text-green-800 dark:text-green-200">Categories</h3>
            <ul class="mt-2">
                <li><a href="#" class="text-green-600 dark:text-green-400 hover:underline">Men</a></li>
                <li><a href="#" class="text-green-600 dark:text-green-400 hover:underline">Women</a></li>
                <li><a href="#" class="text-green-600 dark:text-green-400 hover:underline">Kids</a></li>
                <li><a href="#" class="text-green-600 dark:text-green-400 hover:underline">Accessories</a></li>
            </ul>
        </div>
        <div class="p-4 bg-pink-100 dark:bg-pink-900 rounded shadow">
            <h3 class="font-semibold text-lg text-pink-800 dark:text-pink-200">Support</h3>
            <ul class="mt-2">
                <li><a href="#" class="text-pink-600 dark:text-pink-400 hover:underline">Customer Service</a></li>
                <li><a href="#" class="text-pink-600 dark:text-pink-400 hover:underline">Returns</a></li>
                <li><a href="#" class="text-pink-600 dark:text-pink-400 hover:underline">FAQs</a></li>
                <li><a href="#" class="text-pink-600 dark:text-pink-400 hover:underline">Contact Us</a></li>
            </ul>
        </div>
    </div>
    <div class="mt-8">
        <h3 class="font-semibold text-lg text-gray-800 dark:text-gray-100">User Profile</h3>
        <div class="flex items-center mt-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <div class="ml-3">
                <p class="text-gray-800 dark:text-gray-100">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400 text-sm">[email protected]</p>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <h3 class="font-semibold text-lg text-gray-800 dark:text-gray-100">Featured Image</h3>
        <img src="https://picsum.photos/300/200" alt="Featured" class="mt-2 rounded-md shadow">
    </div>
</div>

Site Map Component

A responsive site map component designed in a Brutalist style with a dark theme for business/corporate websites, incorporating interactive features.

Open Preview

                <div class="bg-gray-800 dark:bg-gray-900 p-4">
    <h1 class="text-3xl font-bold text-white mb-4">Site Map</h1>
    <ul class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg">
            <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Home</h2>
            <p class="text-gray-600 dark:text-gray-400">Welcome to our website.</p>
        </li>
        <li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg">
            <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">About Us</h2>
            <p class="text-gray-600 dark:text-gray-400">Learn more about our company.</p>
        </li>
        <li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg">
            <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Services</h2>
            <p class="text-gray-600 dark:text-gray-400">Discover our services.</p>
        </li>
        <li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg">
            <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Portfolio</h2>
            <p class="text-gray-600 dark:text-gray-400">View our work.</p>
        </li>
        <li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg">
            <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Blog</h2>
            <p class="text-gray-600 dark:text-gray-400">Read our latest posts.</p>
        </li>
        <li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg">
            <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Contact</h2>
            <p class="text-gray-600 dark:text-gray-400">Get in touch with us.</p>
        </li>
    </ul>
    <div class="mt-8">
        <h2 class="text-xl font-bold text-white mb-2">Team Members</h2>
        <div class="flex flex-wrap gap-4">
            <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg flex flex-col items-center">
                <img class="w-24 h-24 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Team Member">
                <h3 class="text-lg font-bold text-gray-800 dark:text-gray-200">John Doe</h3>
                <p class="text-gray-600 dark:text-gray-400">CEO</p>
            </div>
            <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg flex flex-col items-center">
                <img class="w-24 h-24 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Team Member">
                <h3 class="text-lg font-bold text-gray-800 dark:text-gray-200">Jane Smith</h3>
                <p class="text-gray-600 dark:text-gray-400">CTO</p>
            </div>
        </div>
    </div>
    <div class="mt-8">
        <h2 class="text-xl font-bold text-white mb-2">Gallery</h2>
        <div class="grid grid-cols-2 md:grid-cols-3 gap-2">
            <img class="w-full h-32 object-cover rounded-lg bg-gray-300 dark:bg-gray-600" src="https://picsum.photos/200/300?random=1" alt="Gallery Image">
            <img class="w-full h-32 object-cover rounded-lg bg-gray-300 dark:bg-gray-600" src="https://picsum.photos/200/300?random=2" alt="Gallery Image">
            <img class="w-full h-32 object-cover rounded-lg bg-gray-300 dark:bg-gray-600" src="https://picsum.photos/200/300?random=3" alt="Gallery Image">
            <img class="w-full h-32 object-cover rounded-lg bg-gray-300 dark:bg-gray-600" src="https://picsum.photos/200/300?random=4" alt="Gallery Image">
        </div>
    </div>
</div>