Search Components

Site Map

Hierarchical display of website structure

Site Map Component

A complex, responsive site map component with a corporate/professional style and earth tone color scheme, suitable for business websites. Includes dark mode support.

Open Preview

                <footer class="bg-stone-50 text-stone-700 dark:bg-stone-900 dark:text-stone-300 py-12 md:py-16">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 md:grid-cols-4 lg:grid-cols-5 gap-8 md:gap-12">

      <!-- Company Info / Logo -->
      <div class="md:col-span-2 lg:col-span-2">
        <h2 class="text-2xl font-bold text-stone-800 dark:text-stone-100 mb-4 tracking-tight">
          <a href="#" class="flex items-center space-x-2">
            <svg class="h-8 w-8 text-amber-600 dark:text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9Fehmeda 9H3m9-9a9 9 0 00-9 9m-9-9h16.5a2.25 2.25 0 012.25 2.25v1.5a2.25 2.25 0 01-2.25 2.25H3.75a2.25 2.25 0 01-2.25-2.25V6.75a2.25 2.25 0 012.25-2.25H12" />
            </svg>
            <span class="block">AcmeCorp</span>
          </a>
        </h2>
        <p class="mt-4 text-stone-600 dark:text-stone-400 leading-relaxed max-w-sm">
          Building a sustainable future through innovative solutions and unwavering commitment to excellence.
        </p>
        <div class="mt-6 flex space-x-4">
          <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors"><span class="sr-only">Facebook</span><svg class="h-6 w-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.777-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.33V22h7.493c4.613-.755 8.167-4.508 8.167-9.879z" clip-rule="evenodd" /></svg></a>
          <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors"><span class="sr-only">LinkedIn</span><svg class="h-6 w-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>
          <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors"><span class="sr-only">Twitter</span><svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.007-.532A11.022 11.022 0 0022 5.92a10.847 10.847 0 01-3.148.815A4.771 4.771 0 0019.426 3.7c.905-.541 1.791-1.295 2.617-2.196a11.396 11.396 0 01-3.69 1.408A4.757 4.757 0 0015.65 0c-2.073 0-3.75 1.677-3.75 3.75 0 .296.033.583.092.86S10.59 5 10.3 5.485C6.591 2.502 3.82 1.34 1.75 0 1.258.463.81 1 0 1.636 1.748 3.064 3.728 4.095 5.922 4.095c-.352 2.25 1.096 4.3 3.322 4.764a4.57 4.57 0 01-2.148.069c.563 1.332 1.632 2.3 2.923 2.628a9.886 9.886 0 01-6.104 2.158c-.378 0-.756-.022-1.13-.067.8 2.25 2.474 3.996 4.744 4.558-.093 0-.187-.008-.28-.008-.43 0-.853-.024-1.28-.072C4.195 20.358 1.94 21.054 0 21.292a11.127 11.127 0 006 1.838c7.886 0 12.87-6.9 12.87-12.873 0-.196-.005-.39-.013-.585A8.67 8.67 0 0022 4.4z" /></svg></a>
        </div>
      </div>

      <!-- Quick Links -->
      <div>
        <h3 class="text-lg font-semibold text-stone-800 dark:text-stone-100 mb-4">Quick Links</h3>
        <ul class="space-y-3">
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              About Us
            </a>
          </li>
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              Our Services
            </a>
          </li>
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              Portfolio
            </a>
          </li>
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              News & Blog
            </a>
          </li>
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              Careers
            </a>
          </li>
        </ul>
      </div>

      <!-- Resources -->
      <div>
        <h3 class="text-lg font-semibold text-stone-800 dark:text-stone-100 mb-4">Resources</h3>
        <ul class="space-y-3">
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              Help Center
            </a>
          </li>
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              FAQs
            </a>
          </li>
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              Support Docs
            </a>
          </li>
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              Customer Stories
            </a>
          </li>
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              Partnerships
            </a>
          </li>
        </ul>
      </div>

      <!-- Legal & Contact -->
      <div>
        <h3 class="text-lg font-semibold text-stone-800 dark:text-stone-100 mb-4">Legal & Contact</h3>
        <ul class="space-y-3">
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              Privacy Policy
            </a>
          </li>
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              Terms of Service
            </a>
          </li>
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              Cookie Policy
            </a>
          </li>
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              Contact Us
            </a>
          </li>
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              Site Map
            </a>
          </li>
        </ul>
      </div>
    </div>

    <div class="mt-12 border-t border-stone-200 dark:border-stone-700 pt-8 text-center text-sm text-stone-500 dark:text-stone-400">
      <p>&copy; <span id="current-year"></span> AcmeCorp. All rights reserved.</p>
      <p class="mt-2">Powered by Innovation. Built for the Future.</p>
    </div>
  </div>
</footer>

<script>
  // Dynamically set the current year for the copyright notice
  document.getElementById('current-year').textContent = new Date().getFullYear();

  // Basic dark mode toggle for demonstration (optional, often managed by a higher-level framework)
  // To make dark mode work, you'd typically have a button somewhere on your page
  // or rely on the user's system preferences with Tailwind's 'class' dark mode strategy.
  // This snippet is just to show the HTML output is ready for dark mode.
  // Example of a toggle (you'd need a button to trigger this):
  /*
  const htmlElement = document.documentElement;
  const isDarkMode = localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches);

  if (isDarkMode) {
    htmlElement.classList.add('dark');
  } else {
    htmlElement.classList.remove('dark');
  }

  function toggleDarkMode() {
    if (htmlElement.classList.contains('dark')) {
      htmlElement.classList.remove('dark');
      localStorage.setItem('theme', 'light');
    } else {
      htmlElement.classList.add('dark');
      localStorage.setItem('theme', 'dark');
    }
  }
  */
</script>

A responsive neumorphic site map component for industrial and manufacturing companies, featuring a monochromatic color scheme and dark mode support. Elements appear to extrude from the background using subtle shadows.

Open Preview

                <div class="min-h-screen bg-gray-200 dark:bg-gray-800 p-8 flex items-center justify-center font-sans transition-colors duration-300">
  <div class="container mx-auto p-6 rounded-3xl shadow-neumorphic-light-xl dark:shadow-neumorphic-dark-xl bg-gray-200 dark:bg-gray-800 transition-all duration-300 max-w-7xl relative">

    <!-- Title -->
    <h2 class="text-4xl md:text-5xl font-bold text-gray-700 dark:text-gray-300 mb-10 text-center relative tracking-wide drop-shadow-md pb-4">
      Industrial Site Map
      <span class="absolute bottom-0 left-1/2 -translate-x-1/2 w-24 h-1 rounded-full bg-gray-400 dark:bg-gray-600 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark"></span>
    </h2>

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

      <!-- Column 1: Company -->
      <div class="p-6 rounded-2xl shadow-neumorphic-light dark:shadow-neumorphic-dark bg-gray-200 dark:bg-gray-800 transition-all duration-300">
        <h3 class="text-2xl font-semibold text-gray-700 dark:text-gray-300 mb-4 pb-2 border-b border-gray-300 dark:border-gray-700">Company</h3>
        <ul class="space-y-3">
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">About Us</a></li>
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">Our Mission</a></li>
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">Leadership</a></li>
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">Careers</a></li>
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">News & Press</a></li>
        </ul>
      </div>

      <!-- Column 2: Products & Services -->
      <div class="p-6 rounded-2xl shadow-neumorphic-light dark:shadow-neumorphic-dark bg-gray-200 dark:bg-gray-800 transition-all duration-300">
        <h3 class="text-2xl font-semibold text-gray-700 dark:text-gray-300 mb-4 pb-2 border-b border-gray-300 dark:border-gray-700">Products & Services</h3>
        <ul class="space-y-3">
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">Automation Systems</a></li>
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">Robotics Solutions</a></li>
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">Industrial IoT</a></li>
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">Consulting & Design</a></li>
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">Support & Maintenance</a></li>
        </ul>
      </div>

      <!-- Column 3: Industries -->
      <div class="p-6 rounded-2xl shadow-neumorphic-light dark:shadow-neumorphic-dark bg-gray-200 dark:bg-gray-800 transition-all duration-300">
        <h3 class="text-2xl font-semibold text-gray-700 dark:text-gray-300 mb-4 pb-2 border-b border-gray-300 dark:border-gray-700">Industries Served</h3>
        <ul class="space-y-3">
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">Automotive</a></li>
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">Electronics</a></li>
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">Pharmaceutical</a></li>
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">Food & Beverage</a></li>
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">Heavy Machinery</a></li>
        </ul>
      </div>

      <!-- Column 4: Resources & Contact -->
      <div class="p-6 rounded-2xl shadow-neumorphic-light dark:shadow-neumorphic-dark bg-gray-200 dark:bg-gray-800 transition-all duration-300">
        <h3 class="text-2xl font-semibold text-gray-700 dark:text-gray-300 mb-4 pb-2 border-b border-gray-300 dark:border-gray-700">Resources & Contact</h3>
        <ul class="space-y-3">
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">Blog</a></li>
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">Case Studies</a></li>
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">Downloads</a></li>
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">FAQ</a></li>
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">Contact Us</a></li>
        </ul>
      </div>

    </div>

    <!-- Placeholder for an industrial icon/logo (e.g., gear) mimicking neumorphic style -->
    <div class="absolute bottom-8 right-8 w-16 h-16 md:w-20 md:h-20 rounded-full bg-gray-300 dark:bg-gray-700 shadow-neumorphic-light-inverse dark:shadow-neumorphic-dark-inverse flex items-center justify-center pointer-events-none opacity-80">
        <!-- Tailwind doesn't have native icon support, so this is a conceptual placeholder. An SVG would go here. -->
        <svg class="w-10 h-10 md:w-12 md:h-12 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12 1L9 5H3L1 11L6 18H18L23 11L21 5H15L12 1ZM12 4.09L13.88 7H10.12L12 4.09ZM5.6 9L7.2 6H16.8L18.4 9H5.6ZM15 15H9V12H15V15ZM6.5 16H17.5L15.5 19H8.5L6.5 16Z"></path>
        </svg>
    </div>

  </div>
</div>

<style>
  /* Base styles for neumorphism shadows */
  .shadow-neumorphic-light {
    box-shadow: 6px 6px 12px #a3b1c6, -6px -6px 12px #ffffff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #3c4046, -6px -6px 12px #26292c;
  }

  .shadow-neumorphic-light-xl {
    box-shadow: 20px 20px 40px #a3b1c6, -20px -20px 40px #ffffff;
  }
  .dark .shadow-neumorphic-dark-xl {
    box-shadow: 20px 20px 40px #3c4046, -20px -20px 40px #26292c;
  }

  /* Inner shadow for active/pressed state */
  .active\:shadow-inner-neumorphic-light:active {
    box-shadow: inset 2px 2px 5px #a3b1c6, inset -2px -2px 5px #ffffff;
  }
  .dark .active\:shadow-inner-neumorphic-dark:active {
    box-shadow: inset 2px 2px 5px #3c4046, inset -2px -2px 5px #26292c;
  }

  /* Inverse shadow for the bottom right element */
  .shadow-neumorphic-light-inverse {
    box-shadow: -6px -6px 12px #a3b1c6, 6px 6px 12px #ffffff;
  }
  .dark .shadow-neumorphic-dark-inverse {
    box-shadow: -6px -6px 12px #3c4046, 6px 6px 12px #26292c;
  }

  /* Custom shadow for the title underline for a subtle recessed look */
  .shadow-inner-neumorphic-light {
    box-shadow: inset 2px 2px 3px #a3b1c6, inset -2px -2px 3px #ffffff;
  }
  .dark .shadow-inner-neumorphic-dark {
    box-shadow: inset 2px 2px 3px #3c4046, inset -2px -2px 3px #26292c;
  }
</style>

Neumorphism Vibrant Site Map Component

A simple, responsive site map component designed with a neumorphic style and a vibrant color scheme, suitable for documentation or wiki sites. Includes dark mode support.

Open Preview

                <div class="min-h-screen bg-gradient-to-br from-purple-100 to-indigo-100 dark:from-gray-900 dark:to-black p-4 sm:p-8 flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl bg-gradient-to-br from-purple-100 to-indigo-100 dark:from-gray-800 dark:to-gray-900 rounded-3xl shadow-xl p-6 sm:p-10 transition-all duration-300 ease-in-out
              dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.6),inset_-2px_-2px_5px_rgba(30,30,30,0.6),2px_2px_8px_rgba(0,0,0,0.4),-2px_-2px_8px_rgba(40,40,40,0.4)]
              shadow-[inset_2px_2px_5px_rgba(255,255,255,0.7),inset_-2px_-2px_5px_rgba(180,180,250,0.7),2px_2px_8px_rgba(150,150,250,0.3),-2px_-2px_8px_rgba(255,255,255,0.8)]">

    <h2 class="text-3xl sm:text-4xl font-extrabold text-indigo-700 dark:text-purple-400 mb-8 sm:mb-12 text-center drop-shadow-lg">
      Site Map
    </h2>

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

      <!-- Category 1: Getting Started -->
      <div class="p-5 rounded-2xl transition-all duration-300 ease-in-out
                  bg-gradient-to-br from-purple-50 to-indigo-50 dark:from-gray-700 dark:to-gray-800
                  shadow-[5px_5px_10px_rgba(150,150,250,0.2),-5px_-5px_10px_rgba(255,255,255,0.8)]
                  dark:shadow-[5px_5px_10px_rgba(0,0,0,0.3),-5px_-5px_10px_rgba(40,40,40,0.4)]
                  hover:shadow-[inset_2px_2px_5px_rgba(150,150,250,0.3),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
                  dark:hover:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(30,30,30,0.5)]">
        <h3 class="text-xl font-bold text-indigo-600 dark:text-purple-300 mb-4">Getting Started</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Installation Guide</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Quick Start Tutorial</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Frequently Asked Questions</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">System Requirements</a></li>
        </ul>
      </div>

      <!-- Category 2: Core Concepts -->
      <div class="p-5 rounded-2xl transition-all duration-300 ease-in-out
                  bg-gradient-to-br from-purple-50 to-indigo-50 dark:from-gray-700 dark:to-gray-800
                  shadow-[5px_5px_10px_rgba(150,150,250,0.2),-5px_-5px_10px_rgba(255,255,255,0.8)]
                  dark:shadow-[5px_5px_10px_rgba(0,0,0,0.3),-5px_-5px_10px_rgba(40,40,40,0.4)]
                  hover:shadow-[inset_2px_2px_5px_rgba(150,150,250,0.3),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
                  dark:hover:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(30,30,30,0.5)]">
        <h3 class="text-xl font-bold text-indigo-600 dark:text-purple-300 mb-4">Core Concepts</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Data Models</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">API Endpoints</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Authentication</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Error Handling</a></li>
        </ul>
      </div>

      <!-- Category 3: Advanced Topics -->
      <div class="p-5 rounded-2xl transition-all duration-300 ease-in-out
                  bg-gradient-to-br from-purple-50 to-indigo-50 dark:from-gray-700 dark:to-gray-800
                  shadow-[5px_5px_10px_rgba(150,150,250,0.2),-5px_-5px_10px_rgba(255,255,255,0.8)]
                  dark:shadow-[5px_5px_10px_rgba(0,0,0,0.3),-5px_-5px_10px_rgba(40,40,40,0.4)]
                  hover:shadow-[inset_2px_2px_5px_rgba(150,150,250,0.3),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
                  dark:hover:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(30,30,30,0.5)]">
        <h3 class="text-xl font-bold text-indigo-600 dark:text-purple-300 mb-4">Advanced Topics</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Custom Integrations</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Performance Optimization</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Security Best Practices</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Migration Guides</a></li>
        </ul>
      </div>

      <!-- Category 4: Resources -->
      <div class="p-5 rounded-2xl transition-all duration-300 ease-in-out
                  bg-gradient-to-br from-purple-50 to-indigo-50 dark:from-gray-700 dark:to-gray-800
                  shadow-[5px_5px_10px_rgba(150,150,250,0.2),-5px_-5px_10px_rgba(255,255,255,0.8)]
                  dark:shadow-[5px_5px_10px_rgba(0,0,0,0.3),-5px_-5px_10px_rgba(40,40,40,0.4)]
                  hover:shadow-[inset_2px_2px_5px_rgba(150,150,250,0.3),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
                  dark:hover:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(30,30,30,0.5)]">
        <h3 class="text-xl font-bold text-indigo-600 dark:text-purple-300 mb-4">Resources</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">API Reference</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Glossary of Terms</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Community Forum</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Support & Contact</a></li>
        </ul>
      </div>

      <!-- Category 5: Release Notes -->
      <div class="p-5 rounded-2xl transition-all duration-300 ease-in-out
                  bg-gradient-to-br from-purple-50 to-indigo-50 dark:from-gray-700 dark:to-gray-800
                  shadow-[5px_5px_10px_rgba(150,150,250,0.2),-5px_-5px_10px_rgba(255,255,255,0.8)]
                  dark:shadow-[5px_5px_10px_rgba(0,0,0,0.3),-5px_-5px_10px_rgba(40,40,40,0.4)]
                  hover:shadow-[inset_2px_2px_5px_rgba(150,150,250,0.3),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
                  dark:hover:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(30,30,30,0.5)]">
        <h3 class="text-xl font-bold text-indigo-600 dark:text-purple-300 mb-4">Release Notes</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Latest Version</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Previous Versions</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Upcoming Features</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Bug Fixes</a></li>
        </ul>
      </div>

      <!-- Category 6: Legal & Compliance -->
      <div class="p-5 rounded-2xl transition-all duration-300 ease-in-out
                  bg-gradient-to-br from-purple-50 to-indigo-50 dark:from-gray-700 dark:to-gray-800
                  shadow-[5px_5px_10px_rgba(150,150,250,0.2),-5px_-5px_10px_rgba(255,255,255,0.8)]
                  dark:shadow-[5px_5px_10px_rgba(0,0,0,0.3),-5px_-5px_10px_rgba(40,40,40,0.4)]
                  hover:shadow-[inset_2px_2px_5px_rgba(150,150,250,0.3),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
                  dark:hover:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(30,30,30,0.5)]">
        <h3 class="text-xl font-bold text-indigo-600 dark:text-purple-300 mb-4">Legal & Compliance</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Terms of Service</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Privacy Policy</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Cookie Policy</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">DMCA Policy</a></li>
        </ul>
      </div>

    </div>

  </div>
</div>

Industrial_Site_Map_Component

A site map component for agricultural/farming websites with an industrial design aesthetic, using warm neutrals. Features responsive layout, dark mode support, and interactive link sections.

Open Preview

                <section class="bg-stone-50 text-stone-800 py-16 dark:bg-stone-900 dark:text-stone-200 transition-colors duration-300">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-4xl sm:text-5xl font-extrabold text-center mb-12 uppercase tracking-wide border-b-4 border-b-amber-500 pb-4 dark:border-b-amber-600">
      Site Map
    </h2>

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

      <!-- Column 1: Company Info -->
      <div class="bg-white p-8 rounded-lg shadow-xl border-t-4 border-amber-400 dark:bg-stone-800 dark:border-amber-700 transition-all duration-300 transform hover:scale-105">
        <h3 class="text-2xl font-bold mb-6 text-amber-700 dark:text-amber-500 border-b-2 border-stone-200 pb-3 dark:border-stone-700">Our Farm</h3>
        <ul class="space-y-3 ">
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-seedling mr-2 text-amber-500"></i> About Us</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-award mr-2 text-amber-500"></i> Our Heritage</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-tractor mr-2 text-amber-500"></i> Farming Practices</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-users mr-2 text-amber-500"></i> Meet the Team</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-map-marker-alt mr-2 text-amber-500"></i> Contact Us</a></li>
        </ul>
      </div>

      <!-- Column 2: Products & Services -->
      <div class="bg-white p-8 rounded-lg shadow-xl border-t-4 border-amber-400 dark:bg-stone-800 dark:border-amber-700 transition-all duration-300 transform hover:scale-105">
        <h3 class="text-2xl font-bold mb-6 text-amber-700 dark:text-amber-500 border-b-2 border-stone-200 pb-3 dark:border-stone-700">Crops & Goods</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-wheat-alt mr-2 text-amber-500"></i> Grains & Cereals</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-apple-alt mr-2 text-amber-500"></i> Fruits & Vegetables</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-leaf mr-2 text-amber-500"></i> Organic Produce</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-mortar-pestle mr-2 text-amber-500"></i> Processed Goods</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-truck-moving mr-2 text-amber-500"></i> Delivery Services</a></li>
        </ul>
      </div>

      <!-- Column 3: Resources & Insights -->
      <div class="bg-white p-8 rounded-lg shadow-xl border-t-4 border-amber-400 dark:bg-stone-800 dark:border-amber-700 transition-all duration-300 transform hover:scale-105">
        <h3 class="text-2xl font-bold mb-6 text-amber-700 dark:text-amber-500 border-b-2 border-stone-200 pb-3 dark:border-stone-700">Resources</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-newspaper mr-2 text-amber-500"></i> Blog & News</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-book-open mr-2 text-amber-500"></i> Research & Reports</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-cogs mr-2 text-amber-500"></i> Farm Technology</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-question-circle mr-2 text-amber-500"></i> FAQs</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-map mr-2 text-amber-500"></i> Sitemap</a></li>
        </ul>
      </div>

      <!-- Column 4: Legal & Policies -->
      <div class="bg-white p-8 rounded-lg shadow-xl border-t-4 border-amber-400 dark:bg-stone-800 dark:border-amber-700 transition-all duration-300 transform hover:scale-105">
        <h3 class="text-2xl font-bold mb-6 text-amber-700 dark:text-amber-500 border-b-2 border-stone-200 pb-3 dark:border-stone-700">Legal & Privacy</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-file-contract mr-2 text-amber-500"></i> Terms of Service</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-user-shield mr-2 text-amber-500"></i> Privacy Policy</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-cookie-bite mr-2 text-amber-500"></i> Cookie Policy</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-gavel mr-2 text-amber-500"></i> Legal Disclaimer</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-sitemap mr-2 text-amber-500"></i> XML Sitemap</a></li>
        </ul>
      </div>

    </div>

    <div class="mt-16 text-center text-stone-600 dark:text-stone-400">
      <p>&copy; 2023 AgroFarm Inc. All rights reserved. Cultivating the future, responsibly.</p>
    </div>
  </div>
</section>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

Site Map Component

A simple, responsive site map component with a paper/print-inspired design and an analogous color scheme, suitable for manufacturing/industrial websites, including dark mode support.

Open Preview

                <section class="font-sans bg-amber-50 dark:bg-gray-900 text-stone-800 dark:text-gray-200 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-6xl mx-auto bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-amber-200 dark:border-gray-700">
    <div class="p-6 sm:p-8 lg:p-10 border-b border-amber-100 dark:border-gray-700">
      <h2 class="text-3xl sm:text-4xl font-bold tracking-tight text-stone-900 dark:text-gray-100 mb-2 font-serif">Site Overview</h2>
      <p class="text-amber-700 dark:text-gray-400 text-lg sm:text-xl font-medium">Navigate our operational blueprint.</p>
    </div>

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

      <!-- Column 1: Company -->
      <div>
        <h3 class="text-xl font-semibold text-amber-700 dark:text-amber-400 mb-4 tracking-wide border-b pb-2 border-dashed border-amber-300 dark:border-gray-600">Company</h3>
        <nav class="space-y-3">
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">About Us</a>
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Our History</a>
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Leadership</a>
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Careers</a>
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Contact Us</a>
        </nav>
      </div>

      <!-- Column 2: Products -->
      <div>
        <h3 class="text-xl font-semibold text-amber-700 dark:text-amber-400 mb-4 tracking-wide border-b pb-2 border-dashed border-amber-300 dark:border-gray-600">Products</h3>
        <nav class="space-y-3">
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Machinery</a>
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Components</a>
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Raw Materials</a>
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Custom Solutions</a>
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Product Catalog</a>
        </nav>
      </div>

      <!-- Column 3: Services -->
      <div>
        <h3 class="text-xl font-semibold text-amber-700 dark:text-amber-400 mb-4 tracking-wide border-b pb-2 border-dashed border-amber-300 dark:border-gray-600">Services</h3>
        <nav class="space-y-3">
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Maintenance</a>
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Installation</a>
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Consulting</a>
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Training</a>
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Support</a>
        </nav>
      </div>

      <!-- Column 4: Resources -->
      <div>
        <h3 class="text-xl font-semibold text-amber-700 dark:text-amber-400 mb-4 tracking-wide border-b pb-2 border-dashed border-amber-300 dark:border-gray-600">Resources</h3>
        <nav class="space-y-3">
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Case Studies</a>
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Blog</a>
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Downloads</a>
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">FAQs</a>
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Glossary</a>
        </nav>
      </div>

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

Social Media Site Map Component

A simple, responsive sitemap component for social media interfaces with sepia/brown tones and dark mode support, featuring subtle hover microinteractions.

Open Preview

                <nav aria-label="Social Media Site Map" class="bg-amber-50 dark:bg-stone-900 font-sans p-4 sm:p-6 lg:p-8 min-h-screen flex items-center justify-center">
  <div class="container mx-auto max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl bg-amber-100 dark:bg-stone-800 shadow-xl rounded-lg p-6 sm:p-8 md:p-10 border border-amber-200 dark:border-stone-700 animate-fade-in-up">
    <h2 class="text-2xl sm:text-3xl font-bold text-amber-900 dark:text-amber-50 mb-6 text-center tracking-wide">Sitemap</h2>
    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:gap-6">
      
      <a href="#profile" class="group flex items-center p-3 sm:p-4 rounded-md bg-amber-200 dark:bg-stone-700 text-amber-800 dark:text-amber-100 hover:bg-amber-300 dark:hover:bg-stone-600 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:shadow-md animate-link-pop">
        <svg class="h-6 w-6 sm:h-7 sm:w-7 mr-3 shrink-0 text-amber-700 dark:text-amber-200 group-hover:text-amber-900 dark:group-hover:text-amber-50 transition-colors duration-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z" clip-rule="evenodd" />
        </svg>
        <span class="text-lg sm:text-xl font-medium">Profile</span>
      </a>

      <a href="#feed" class="group flex items-center p-3 sm:p-4 rounded-md bg-amber-200 dark:bg-stone-700 text-amber-800 dark:text-amber-100 hover:bg-amber-300 dark:hover:bg-stone-600 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:shadow-md animate-link-pop">
        <svg class="h-6 w-6 sm:h-7 sm:w-7 mr-3 shrink-0 text-amber-700 dark:text-amber-200 group-hover:text-amber-900 dark:group-hover:text-amber-50 transition-colors duration-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 4.5V19.5M12 4.5c2.756 0 5.466.714 7.07 2.32A7.447 7.447 0 0121 12A7.447 7.447 0 0119.07 17.18c-1.604 1.605-4.314 2.32-7.07 2.32m0-15c-2.756 0-5.466.714-7.07 2.32A7.447 7.447 0 003 12a7.447 7.447 0 001.93 5.18c1.604 1.605 4.314 2.32 7.07 2.32"></path>
        </svg>
        <span class="text-lg sm:text-xl font-medium">Feed</span>
      </a>

      <a href="#messages" class="group flex items-center p-3 sm:p-4 rounded-md bg-amber-200 dark:bg-stone-700 text-amber-800 dark:text-amber-100 hover:bg-amber-300 dark:hover:bg-stone-600 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:shadow-md animate-link-pop">
        <svg class="h-6 w-6 sm:h-7 sm:w-7 mr-3 shrink-0 text-amber-700 dark:text-amber-200 group-hover:text-amber-900 dark:group-hover:text-amber-50 transition-colors duration-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
           <path fill-rule="evenodd" d="M4.848 2.775C3.902 2.19 2.96 2.592 2.405 3.513l-.583.978c-.354.594-.093 1.354.52 1.67L7.232 9.517 5.918 11.66a1.711 1.711 0 002.414 2.414l2.143-1.314 4.397 2.703a1.75 1.75 0 002.366-1.077l1.785-5.95a1.75 1.75 0 00-.773-1.953L16.29 2.505a1.75 1.75 0 00-1.953-.773l-5.95 1.785a1.75 1.75 0 00-1.077 2.366L6.993 9.404l-2.143-1.314a1.711 1.711 0 00-2.414 2.414L5.918 11.66l-1.066 1.776a1.75 1.75 0 001.077 2.366l5.95 1.785a1.75 1.75 0 001.953-.773l1.785-5.95a1.75 1.75 0 00.773-1.953l-1.314-2.143a1.711 1.711 0 00-2.414-2.414L11.66 5.918 9.517 7.232l-1.776 1.066a1.75 1.75 0 00-2.366-1.077z" clip-rule="evenodd" />
        </svg>
        <span class="text-lg sm:text-xl font-medium">Messages</span>
      </a>

      <a href="#notifications" class="group flex items-center p-3 sm:p-4 rounded-md bg-amber-200 dark:bg-stone-700 text-amber-800 dark:text-amber-100 hover:bg-amber-300 dark:hover:bg-stone-600 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:shadow-md animate-link-pop">
        <svg class="h-6 w-6 sm:h-7 sm:w-7 mr-3 shrink-0 text-amber-700 dark:text-amber-200 group-hover:text-amber-900 dark:group-hover:text-amber-50 transition-colors duration-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path fill-rule="evenodd" d="M7.5 6v.75H5.513c-.96 0-1.76.75-1.76 1.71v.588l.643 1.623A2.88 2.88 0 0010 12.5v4.5A2.25 2.25 0 0012.25 19h.5A2.25 2.25 0 0015 16.5v-4.5a2.88 2.88 0 00-1.885-2.732l.643-1.623h-.002a2.25 2.25 0 011.76-1.71V6A2.25 2.25 0 0118 3.75h-.254V6h-2.19A2.25 2.25 0 0013.25 8.25h-.5A2.25 2.25 0 0010.5 6v-.75H7.5zm0-3.75C7.5 1.745 8.745 1 10.25 1h.5c1.505 0 2.75.745 2.75 2.75V6H7.5V2.25z" clip-rule="evenodd" />
        </svg>
        <span class="text-lg sm:text-xl font-medium">Notifications</span>
      </a>

      <a href="#friends" class="group flex items-center p-3 sm:p-4 rounded-md bg-amber-200 dark:bg-stone-700 text-amber-800 dark:text-amber-100 hover:bg-amber-300 dark:hover:bg-stone-600 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:shadow-md animate-link-pop">
        <svg class="h-6 w-6 sm:h-7 sm:w-7 mr-3 shrink-0 text-amber-700 dark:text-amber-200 group-hover:text-amber-900 dark:group-hover:text-amber-50 transition-colors duration-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M15 9.75a3 3 0 10-6 0 3 3 0 006 0zM12 3a2.25 2.25 0 012.25 2.25V6a2.25 2.25 0 01-4.5 0V5.25A2.25 2.25 0 0112 3zM21 12a9 9 0 11-18 0 9 9 0 0118 0zM15 15.75a3 3 0 00-6 0v.75c0 1.35.845 2.5 2.052 3.018A5.976 5.976 0 0012 21.75a5.976 5.976 0 00-2.052-.982A3 3 0 009 16.5v-.75c0-1.35.845-2.5 2.052-3.018A5.976 5.976 0 0012 12a5.976 5.976 0 002.052.982A3 3 0 0015 15.75v.75z" />
        </svg>
        <span class="text-lg sm:text-xl font-medium">Friends</span>
      </a>

      <a href="#settings" class="group flex items-center p-3 sm:p-4 rounded-md bg-amber-200 dark:bg-stone-700 text-amber-800 dark:text-amber-100 hover:bg-amber-300 dark:hover:bg-stone-600 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:shadow-md animate-link-pop">
        <svg class="h-6 w-6 sm:h-7 sm:w-7 mr-3 shrink-0 text-amber-700 dark:text-amber-200 group-hover:text-amber-900 dark:group-hover:text-amber-50 transition-colors duration-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path fill-rule="evenodd" d="M11.777 2.016a.75.75 0 01.446 0l9.026 2.256c.82.205 1.354.912 1.354 1.76V11.25a9 9 0 01-18 0V6.032c0-.848.534-1.555 1.354-1.76l9.026-2.256zM8.25 7a.75.75 0 01.75-.75h6a.75.75 0 010 1.5H9a.75.75 0 01-.75-.75zM12 12a.75.75 0 00-.75.75v3.5a.75.75 0 001.5 0v-3.5A.75.75 0 0012 12z" clip-rule="evenodd" />
        </svg>
        <span class="text-lg sm:text-xl font-medium">Settings</span>
      </a>
    </div>
    <div class="mt-8 text-center">
      <a href="#help" class="inline-flex items-center text-amber-700 dark:text-amber-200 hover:text-amber-900 dark:hover:text-amber-50 hover:underline transition duration-300 ease-in-out text-base sm:text-lg focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-amber-100 dark:focus:ring-offset-stone-800">
        <svg class="h-5 w-5 mr-1.5" 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.228 9.247a4.75 4.75 0 017.544 0M15.485 12.012a6.75 6.75 0 01-11.47 0M10 18.25a.75.75 0 100-1.5.75.75 0 000 1.5zM12 19.5h.008v.008H12V19.5zM12 1.5c-5.523 0-10 4.477-10 10s4.477 10 10 10 10-4.477 10-10-4.477-10-10-10zm0 17.5a.75.75 0 100-1.5.75.75 0 000 1.5z"
          ></path>
        </svg>
        Help & Support
      </a>
    </div>
  </div>
</nav>

<style>
/* Define keyframes for animations */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes link-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

/* Apply animations */
.animate-fade-in-up {
  animation: fade-in-up 0.6s ease-out forwards; 
}

.animate-link-pop:hover {
  animation: link-pop 0.3s ease-in-out;
}
</style>

Neumorphic Site Map Component

A complex, responsive site map component designed in a neumorphic style with jewel tones, suitable for government or public service websites, including dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 min-h-screen bg-gradient-to-br from-emerald-100 to-teal-200 dark:from-gray-900 dark:to-gray-800 text-gray-800 dark:text-gray-200 font-sans">

  <div class="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
    <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-emerald-800 dark:text-emerald-400 mb-12 text-center drop-shadow-lg leading-tight">
      <span class="block">Our Services & Resources</span>
      <span class="block text-2xl sm:text-3xl text-sapphire-700 dark:text-sapphire-300 font-semibold mt-2">Site Map & Quick Links</span>
    </h1>

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

      <!-- Category 1: Public Services -->
      <section class="rounded-3xl p-8 bg-gradient-to-br from-emerald-50 via-emerald-100 to-emerald-200 dark:from-gray-700 dark:via-gray-800 dark:to-gray-900 shadow-xl
                      shadow-emerald-300/60 dark:shadow-gray-950/80
                      hover:shadow-emerald-400/70 dark:hover:shadow-black/70
                      active:shadow-inner active:shadow-emerald-400/40 dark:active:shadow-gray-700/60
                      transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-102">
        <h2 class="text-3xl font-bold mb-6 text-emerald-800 dark:text-emerald-400 border-b-2 border-emerald-400/50 dark:border-emerald-700/50 pb-4 flex items-center">
          <svg class="w-8 h-8 mr-3 text-emerald-600 dark:text-emerald-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M10 2a8 8 0 100 16 8 8 0 000-16zM6.5 9a1.5 1.5 0 100 3 1.5 1.5 0 000-3zM12.5 9a1.5 1.5 0 100 3 1.5 1.5 0 000-3zM7 14.5a3 3 0 016 0H7z" clip-rule="evenodd"></path>
          </svg>
          Public Services
        </h2>
        <nav aria-label="Public Services Links">
          <ul class="space-y-4">
            <li class="hover:scale-102 transition-transform duration-200">
              <a href="#" class="flex items-center text-emerald-700 dark:text-emerald-300 hover:text-emerald-900 dark:hover:text-emerald-100 font-semibold group">
                <span class="bg-emerald-300/40 dark:bg-emerald-700/40 p-2 rounded-full mr-3 group-hover:bg-emerald-400/60 dark:group-hover:bg-emerald-600/60 transition-colors shadow-md dark:shadow-lg">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path></svg>
                </span>
                Apply for Permits & Licenses
              </a>
            </li>
            <li class="hover:scale-102 transition-transform duration-200">
              <a href="#" class="flex items-center text-emerald-700 dark:text-emerald-300 hover:text-emerald-900 dark:hover:text-emerald-100 font-semibold group">
                <span class="bg-emerald-300/40 dark:bg-emerald-700/40 p-2 rounded-full mr-3 group-hover:bg-emerald-400/60 dark:group-hover:bg-emerald-600/60 transition-colors shadow-md dark:shadow-lg">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
                </span>
                Report an Issue
              </a>
            </li>
            <li class="hover:scale-102 transition-transform duration-200">
              <a href="#" class="flex items-center text-emerald-700 dark:text-emerald-300 hover:text-emerald-900 dark:hover:text-emerald-100 font-semibold group">
                <span class="bg-emerald-300/40 dark:bg-emerald-700/40 p-2 rounded-full mr-3 group-hover:bg-emerald-400/60 dark:group-hover:bg-emerald-600/60 transition-colors shadow-md dark:shadow-lg">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17.555 17.555A.75.75 0 0117 18H3a1 1 0 00-1 1v1h16v-1a1 1 0 00-1-1h-.555zM15 9a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                </span>
                Resident Services & Benefits
              </a>
            </li>
            <li class="hover:scale-102 transition-transform duration-200">
              <a href="#" class="flex items-center text-emerald-700 dark:text-emerald-300 hover:text-emerald-900 dark:hover:text-emerald-100 font-semibold group">
                <span class="bg-emerald-300/40 dark:bg-emerald-700/40 p-2 rounded-full mr-3 group-hover:bg-emerald-400/60 dark:group-hover:bg-emerald-600/60 transition-colors shadow-md dark:shadow-lg">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V7.414A2 2 0 0015.414 6L12 2.586A2 2 0 0010.586 2H6zm5 6a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V8z" clip-rule="evenodd"></path></svg>
                </span>
                Pay Bills & Fines Online
              </a>
            </li>
            <li class="hover:scale-102 transition-transform duration-200">
              <a href="#" class="flex items-center text-emerald-700 dark:text-emerald-300 hover:text-emerald-900 dark:hover:text-emerald-100 font-semibold group">
                <span class="bg-emerald-300/40 dark:bg-emerald-700/40 p-2 rounded-full mr-3 group-hover:bg-emerald-400/60 dark:group-hover:bg-emerald-600/60 transition-colors shadow-md dark:shadow-lg">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M8 9a1 1 0 100-2 1 1 0 000 2zM12 9a1 1 0 100-2 1 1 0 000 2zM11 11a1 1 0 100-2 1 1 0 000 2zM7 11a1 1 0 100-2 1 1 0 000 2zM12.95 18H7.05a2.05 2.05 0 01-1.88-2.95l.59-.97a1 1 0 00-.73-1.63H4c-.75 0-1.4.52-1.7.35a.5.5 0 00-.3 0h-.3a.5.5 0 00-.4 0c-.3-.22-.7 0-1 0a.5.5 0 00-.4.35C.65 12.33.65 11.2 1 10c.32-.4.8-1.5 1.5-.75-.24.3-.78 1.1-1.3 1.6-.2.18-.3.4-.3.6a.5.5 0 00.1.35c.2.2.4.2.6.2.2 0 .4-.2.6-.2a.5.5 0 00.35-.1.5.5 0 00.35-.1a.5.5 0 00.3-.1a.5.5 0 00.3-.1c.2-.05.4-.1.6-.1.2 0 .4 0 .6.05.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1.6.15.2.05.4.1c.15-.02.4-.02.6 0 .2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.45.05.65.05.2-.02.4-.02.6 0 .2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02c.22-.02.4-.05.6 0 .2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05.2.02.4.05.6.05a2 2 0 00-1.89-2.95l-.59-.97a1 1 0 01.73-1.63H16c.75 0 1.4.52 1.7.35a.5.5 0 00.3 0h.3a.5.5 0 00.4 0c.3-.22.7 0 1 0a.5.5 0 00.4.35c.35.7.35 1.83 0 3.03-.32.4-.8 1.5-1.5.75.24-.3.78-1.1 1.3-1.6.2-.18.3-.4.3-.6a.5.5 0 00-.1-.35c-.2-.2-.4-.2-.6-.2-.2 0-.4.2-.6.2a.5.5 0 00-.35.1.5.5 0 00-.35.1a.5.5 0 00-.3.1a.5.5 0 00-.3.1c-.2.05-.4.1-.6.1-.2 0-.4 0-.6-.05z" clip-rule="evenodd"></path></svg>
                </span>
                Public Safety Information
              </a>
            </li>
          </ul>
        </nav>
      </section>

      <!-- Category 2: Government & Administration -->
      <section class="rounded-3xl p-8 bg-gradient-to-br from-sapphire-50 via-sapphire-100 to-sapphire-200 dark:from-gray-700 dark:via-gray-800 dark:to-gray-900 shadow-xl
                      shadow-sapphire-300/60 dark:shadow-gray-950/80
                      hover:shadow-sapphire-400/70 dark:hover:shadow-black/70
                      active:shadow-inner active:shadow-sapphire-400/40 dark:active:shadow-gray-700/60
                      transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-102">
        <h2 class="text-3xl font-bold mb-6 text-sapphire-800 dark:text-sapphire-400 border-b-2 border-sapphire-400/50 dark:border-sapphire-700/50 pb-4 flex items-center">
          <svg class="w-8 h-8 mr-3 text-sapphire-600 dark:text-sapphire-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M4 4a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2H4zm11.5 5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM10 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
          </svg>
          Government & Administration
        </h2>
        <nav aria-label="Government & Administration Links">
          <ul class="space-y-4">
            <li class="hover:scale-102 transition-transform duration-200">
              <a href="#" class="flex items-center text-sapphire-700 dark:text-sapphire-300 hover:text-sapphire-900 dark:hover:text-sapphire-100 font-semibold group">
                <span class="bg-sapphire-300/40 dark:bg-sapphire-700/40 p-2 rounded-full mr-3 group-hover:bg-sapphire-400/60 dark:group-hover:bg-sapphire-600/60 transition-colors shadow-md dark:shadow-lg">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6a2 2 0 012-2h8a2 2 0 012 2v6a2 2 0 002-2v-4a2 2 0 00-2-2H4zm.5 10c0 1.1-.9 2-2 2H2v2h2.5c1.38 0 2.5-1.12 2.5-2.5V14h-2.5zM16 14.5a2.5 2.5 0 00-2.5-2.5H14v2.5A2.5 2.5 0 0016.5 17H18v-2h-1.5c-1.1 0-2 .9-2 2z" clip-rule="evenodd"></path></svg>
                </span>
                Departments & Agencies
              </a>
            </li>
            <li class="hover:scale-102 transition-transform duration-200">
              <a href="#" class="flex items-center text-sapphire-700 dark:text-sapphire-300 hover:text-sapphire-900 dark:hover:text-sapphire-100 font-semibold group">
                <span class="bg-sapphire-300/40 dark:bg-sapphire-700/40 p-2 rounded-full mr-3 group-hover:bg-sapphire-400/60 dark:group-hover:bg-sapphire-600/60 transition-colors shadow-md dark:shadow-lg">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path></svg>
                </span>
                Official Documents & Forms
              </a>
            </li>
            <li class="hover:scale-102 transition-transform duration-200">
              <a href="#" class="flex items-center text-sapphire-700 dark:text-sapphire-300 hover:text-sapphire-900 dark:hover:text-sapphire-100 font-semibold group">
                <span class="bg-sapphire-300/40 dark:bg-sapphire-700/40 p-2 rounded-full mr-3 group-hover:bg-sapphire-400/60 dark:group-hover:bg-sapphire-600/60 transition-colors shadow-md dark:shadow-lg">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V7.414A2 2 0 0015.414 6L12 2.586A2 2 0 0010.586 2H6zm5 6a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V8z" clip-rule="evenodd"></path></svg>
                </span>
                City Council & Meetings
              </a>
            </li>
            <li class="hover:scale-102 transition-transform duration-200">
              <a href="#" class="flex items-center text-sapphire-700 dark:text-sapphire-300 hover:text-sapphire-900 dark:hover:text-sapphire-100 font-semibold group">
                <span class="bg-sapphire-300/40 dark:bg-sapphire-700/40 p-2 rounded-full mr-3 group-hover:bg-sapphire-400/60 dark:group-hover:bg-sapphire-600/60 transition-colors shadow-md dark:shadow-lg">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7 2a1 1 0 011 1v1h4V3a1 1 0 112 0v1h2a2 2 0 012 2v5a2 2 0 01-2 2H2a2 2 0 01-2-2V6a2 2 0 012-2h2V3a1 1 0 011-1zm3 11a1 1 0 100 2h4a1 1 0 100-2h-4z" clip-rule="evenodd"></path></svg>
                </span>
                Elections & Voter Information
              </a>
            </li>
            <li class="hover:scale-102 transition-transform duration-200">
              <a href="#" class="flex items-center text-sapphire-700 dark:text-sapphire-300 hover:text-sapphire-900 dark:hover:text-sapphire-100 font-semibold group">
                <span class="bg-sapphire-300/40 dark:bg-sapphire-700/40 p-2 rounded-full mr-3 group-hover:bg-sapphire-400/60 dark:group-hover:bg-sapphire-600/60 transition-colors shadow-md dark:shadow-lg">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v3.586l-.707.707A1 1 0 014 11.586V13a2 2 0 002 2h8a2 2 0 002-2v-1.414l-.707-.707A1 1 0 0114 9.586V6a4 4 0 00-4-4zM8 12.586l1.707 1.707A1 1 0 0011.707 13H14a1 1 0 011 1v1a1 1 0 01-1 1H6a1 1 0 01-1-1v-1a1 1 0 011-1h2.293L8 12.586z" clip-rule="evenodd"></path></svg>
                </span>
                Careers & Job Opportunities
              </a>
            </li>
          </ul>
        </nav>
      </section>

      <!-- Category 3: Community & Culture -->
      <section class="rounded-3xl p-8 bg-gradient-to-br from-ruby-50 via-ruby-100 to-ruby-200 dark:from-gray-700 dark:via-gray-800 dark:to-gray-900 shadow-xl
                      shadow-ruby-300/60 dark:shadow-gray-950/80
                      hover:shadow-ruby-400/70 dark:hover:shadow-black/70
                      active:shadow-inner active:shadow-ruby-400/40 dark:active:shadow-gray-700/60
                      transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-102">
        <h2 class="text-3xl font-bold mb-6 text-ruby-800 dark:text-rose-400 border-b-2 border-ruby-400/50 dark:border-ruby-700/50 pb-4 flex items-center">
          <svg class="w-8 h-8 mr-3 text-ruby-600 dark:text-rose-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M19.969 8.784L1.031 3.551A.75.75 0 000 4.24v9.52c0 .65.756 1.002 1.309.689l18.938-5.233a.75.75 0 00.722-.685V9.467a.75.75 0 00-.731-.683zM3.486 9.387l15.026 4.148L3.486 16.53z" clip-rule="evenodd"></path>
          </svg>
          Community & Culture
        </h2>
        <nav aria-label="Community & Culture Links">
          <ul class="space-y-4">
            <li class="hover:scale-102 transition-transform duration-200">
              <a href="#" class="flex items-center text-ruby-700 dark:text-rose-300 hover:text-ruby-900 dark:hover:text-rose-100 font-semibold group">
                <span class="bg-ruby-300/40 dark:bg-ruby-700/40 p-2 rounded-full mr-3 group-hover:bg-ruby-400/60 dark:group-hover:bg-ruby-600/60 transition-colors shadow-md dark:shadow-lg">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 2a8 8 0 100 16 8 8 0 000-16zM6 9a1 1 0 100 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
                </span>
                Parks & Recreation
              </a>
            </li>
            <li class="hover:scale-102 transition-transform duration-200">
              <a href="#" class="flex items-center text-ruby-700 dark:text-rose-300 hover:text-ruby-900 dark:hover:text-rose-100 font-semibold group">
                <span class="bg-ruby-300/40 dark:bg-ruby-700/40 p-2 rounded-full mr-3 group-hover:bg-ruby-400/60 dark:group-hover:bg-ruby-600/60 transition-colors shadow-md dark:shadow-lg">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
                </span>
                Libraries & Museums
              </a>
            </li>
            <li class="hover:scale-102 transition-transform duration-200">
              <a href="#" class="flex items-center text-ruby-700 dark:text-rose-300 hover:text-ruby-900 dark:hover:text-rose-100 font-semibold group">
                <span class="bg-ruby-300/40 dark:bg-ruby-700/40 p-2 rounded-full mr-3 group-hover:bg-ruby-400/60 dark:group-hover:bg-ruby-600/60 transition-colors shadow-md dark:shadow-lg">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a5 5 0 00-5 5v2a2 2 0 00-2 2v5a2 2 0 002 2h10a2 2 0 002-2v-5a2 2 0 00-2-2V7a5 5 0 00-5-5zm-5 7H7v2a3 3 0 013 3h0a3 3 0 013-3V9h2V7a3 3 0 00-3-3H7a3 3 0 00-3 3v2z"></path></svg>
                </span>
                Events & Calendar
              </a>
            </li>
            <li class="hover:scale-102 transition-transform duration-200">
              <a href="#" class="flex items-center text-ruby-700 dark:text-rose-300 hover:text-ruby-900 dark:hover:text-rose-100 font-semibold group">
                <span class="bg-ruby-300/40 dark:bg-ruby-700/40 p-2 rounded-full mr-3 group-hover:bg-ruby-400/60 dark:group-hover:bg-ruby-600/60 transition-colors shadow-md dark:shadow-lg">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm3 1h6v4H5V6z"></path></svg>
                </span>
                Community Programs
              </a>
            </li>
            <li class="hover:scale-102 transition-transform duration-200">
              <a href="#" class="flex items-center text-ruby-700 dark:text-rose-300 hover:text-ruby-900 dark:hover:text-rose-100 font-semibold group">
                <span class="bg-ruby-300/40 dark:bg-ruby-700/40 p-2 rounded-full mr-3 group-hover:bg-ruby-400/60 dark:group-hover:bg-ruby-600/60 transition-colors shadow-md dark:shadow-lg">
                  <img class="w-5 h-5 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Community Leader">
                </span>
                Volunteer Opportunities
              </a>
            </li>
          </ul>
        </nav>
      </section>

    </div>

    <!-- Contact and Feedback Section -->
    <section class="mt-12 rounded-3xl p-8 bg-gradient-to-br from-indigo-50 via-indigo-100 to-indigo-200 dark:from-gray-700 dark:via-gray-800 dark:to-gray-900 shadow-xl
                    shadow-indigo-300/60 dark:shadow-gray-950/80
                    hover:shadow-indigo-400/70 dark:hover:shadow-black/70
                    active:shadow-inner active:shadow-indigo-400/40 dark:active:shadow-gray-700/60
                    transition-all duration-300 ease-in-out">
      <h2 class="text-3xl font-bold mb-6 text-indigo-800 dark:text-indigo-400 border-b-2 border-indigo-400/50 dark:border-indigo-700/50 pb-4 flex items-center">
        <svg class="w-8 h-8 mr-3 text-indigo-600 dark:text-indigo-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M2.928 6.78C3.766 6.3 4.819 6 6 6h.001C10.607 6 15 10.428 15 16v.001c-.134 1.181-.72 2.302-1.63 3.212-.553.553-1.226 1.012-1.97 1.34L12 20a1 1 0 01-1 1h-1a1 1 0 01-1-1v-.001a4 4 0 00-.775-1.571c-.744-.756-1.527-1.396-2.618-1.516L5 16h-.001a5.002 5.002 0 01-3.64-1.583C.81 13.914.515 12.8.515 11.5V11a.5.5 0 010-.001C.515 9.77.771 8.583 1.258 7.55zM17 12a1 1 0 10-2 0v-.586l.707-.707a1 1 0 000-1.414L15 8.586V8a1 1 0 10-2 0v.586l-.707-.707a1 1 0 00-1.414 0l-.707.707L10.586 8H10a1 1 0 10-2 0H7.414l-.707.707a1 1 0 000 1.414L7.414 10H8a1 1 0 100 2H7.414l-.707.707a1 1 0 000 1.414L7 14.586V15a1 1 0 102 0v-.586l.707-.707a1 1 0 001.414 0l.707.707L11.414 15H12a1 1 0 102 0h.586l.707-.707a1 1 0 000-1.414L15.414 12H16a1 1 0 100-2H15.414l.707-.707a1 1 0 000-1.414L16.414 8H17a1 1 0 100-2h-.586l-.707-.707a1 1 0 00-1.414 0L14.586 6H14a1 1 0 10-2 0h-1.414l-.707-.707a1 1 0 00-1.414 0L8.586 6H8a1 1 0 10-2 0H5.414l-.707-.707a1 1 0 00-1.414 0L3.414 6H3a1 1 0 100 2h.586l.707.707a1 1 0 000 1.414L4.586 10H5a1 1 0 100 2H4.586l-.707.707a1 1 0 000 1.414L4 14.586V15a1 1 0 100 2H3.414l-.707-.707a1 1 0 00-1.414 0L1.414 16H1a1 1 0 100 2h.586l.707.707a1 1 0 000 1.414L2.414 18H3a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L4.586 18H5a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L6.414 18H7a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L8.414 18H9a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L10.586 18H11a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L12.414 18H13a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L14.414 18H15a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L16.414 18H17a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L18.414 18H19a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L20.414 18H21a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L22.414 18H23a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L24.414 18H25a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L26.414 18H27a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L28.414 18H29a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L30.414 18H31a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L32.414 18H33a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L34.414 18H35a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L36.414 18H37a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L38.414 18H39a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L40.414 18H41a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L42.414 18H43a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L44.414 18H45a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L46.414 18H47a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L48.414 18H49a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L50.414 18H51a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L52.414 18H53a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L54.414 18H55a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L56.414 18H57a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L58.414 18H59a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L60.414 18H61a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L62.414 18H63a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L64.414 18H65a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L66.414 18H67a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L68.414 18H69a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L70.414 18H71a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L72.414 18H73a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L74.414 18H75a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L76.414 18H77a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L78.414 18H79a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L80.414 18H81a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L82.414 18H83a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L84.414 18H85a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L86.414 18H87a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L88.414 18H89a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L90.414 18H91a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L92.414 18H93a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L94.414 18H95a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L96.414 18H97a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L98.414 18H99a1 1 0 100 2h.586l.707-.707a1 1 0 000-1.414L100.414 18H101a1 1 0 100 2h-.586l-.707.707a1 1 0 000 1.414L100.414 20H99a1 1 0 100-2h-.586l-.707-.707a1 1 0 000-1.414L98.414 16H97a1 1 0 100-2h-.586l-.707-.707a1 1 0 000-1.414L96.414 14H95a1 1 0 100-2h-.586l-.707-.707a1 1 0 000-1.414L94.414 12H93a1 1 0 100-2h-.586l-.707-.707a1 1 0 000-1.414L92.414 10H91a1 1 0 100-2h-.586l-.707-.707a1 1 0 000-1.414L90.414 8H89a1 1 0 100-2h-.586l-.707-.707a1 1 0 000-1.414L88.414 6H87a1 1 0 100-2h-.586l-.707-.707a1 1 0 000-1.414L86.414 4H85a1 1 0 100-2h-.586l-.707-.707a1 1 0 000-1.414L84.414 2H83a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L82.414 2H81a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L80.414 2H79a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L78.414 2H77a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L76.414 2H75a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L74.414 2H73a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L72.414 2H71a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L70.414 2H69a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L68.414 2H67a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L66.414 2H65a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L64.414 2H63a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L62.414 2H61a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L60.414 2H59a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L58.414 2H57a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L56.414 2H55a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L54.414 2H53a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L52.414 2H51a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L50.414 2H49a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L48.414 2H47a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L46.414 2H45a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L44.414 2H43a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L42.414 2H41a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L40.414 2H39a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L38.414 2H37a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L36.414 2H35a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L34.414 2H33a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L32.414 2H31a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L30.414 2H29a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L28.414 2H27a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L26.414 2H25a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L24.414 2H23a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L22.414 2H21a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L20.414 2H19a1 1 0 100 2h-.586l.707-.707a1 1 0 000-1.414L18.414 2H17a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L16.414 2H15a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L14.414 2H13a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L12.414 2H11a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L10.414 2H9a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L8.414 2H7a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L6.414 2H5a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L4.414 2H3a1 1 0 100 2h-.586l-.707-.707a1 1 0 000-1.414L2.414 2H3a1 1 0 100 2h-.586l-.707-.707a1 1 0 00-.707-.707A.5.5 0 002 2z" clip-rule="evenodd"></path></svg>
        Connect With Us
      </h2>
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
        <div class="rounded-2xl p-6 bg-indigo-200/50 dark:bg-gray-800/50 shadow-md dark:shadow-xl">
          <h3 class="text-xl font-semibold text-indigo-700 dark:text-indigo-300 mb-3">General Inquiries</h3>
          <p class="text-gray-700 dark:text-gray-300 mb-2">Email: <a href="mailto:[email protected]" class="text-indigo-600 dark:text-indigo-400 hover:underline">[email protected]</a></p>
          <p class="text-gray-700 dark:text-gray-300">Phone: <a href="tel:+15551234567" class="text-indigo-600 dark:text-indigo-400 hover:underline">(555) 123-4567</a></p>
        </div>
        <div class="rounded-2xl p-6 bg-indigo-200/50 dark:bg-gray-800/50 shadow-md dark:shadow-xl">
          <h3 class="text-xl font-semibold text-indigo-700 dark:text-indigo-300 mb-3">Office Hours</h3>
          <p class="text-gray-700 dark:text-gray-300">Monday - Friday: 9:00 AM - 5:00 PM</p>
          <p class="text-gray-700 dark:text-gray-300">Saturday - Sunday: Closed</p>
        </div>

        <div class="rounded-2xl p-6 bg-indigo-200/50 dark:bg-gray-800/50 shadow-md dark:shadow-xl">
          <h3 class="text-xl font-semibold text-indigo-700 dark:text-indigo-300 mb-3">Visit Our Office</h3>
          <p class="text-gray-700 dark:text-gray-300">123 Main Street, Anytown, ST 12345</p>
          <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline mt-2 inline-block">Get Directions</a>
        </div>
      </div>

      <form class="grid grid-cols-1 md:grid-cols-2 gap-6 rounded-2xl p-6 bg-indigo-100/50 dark:bg-gray-800/70 shadow-inner dark:shadow-lg">
        <div class="md:col-span-2">
          <h3 class="text-xl font-semibold text-indigo-700 dark:text-indigo-300 mb-4">Send Us Feedback</h3>
        </div>
        <div>
          <label for="name" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Your Name:</label>
          <input type="text" id="name" name="name" class="w-full px-4 py-2 rounded-xl text-gray-700 dark:text-gray-200 bg-emerald-50 dark:bg-gray-700 border border-transparent
                 shadow-inner shadow-emerald-200/70 dark:shadow-gray-900/60
                 focus:outline-none focus:ring-2 focus:ring-sapphire-500/70 focus:border-transparent
                 transition-shadow duration-200" placeholder="John Doe">
        </div>
        <div>
          <label for="email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Your Email:</label>
          <input type="email" id="email" name="email" class="w-full px-4 py-2 rounded-xl text-gray-700 dark:text-gray-200 bg-emerald-50 dark:bg-gray-700 border border-transparent
                 shadow-inner shadow-emerald-200/70 dark:shadow-gray-900/60
                 focus:outline-none focus:ring-2 focus:ring-sapphire-500/70 focus:border-transparent
                 transition-shadow duration-200" placeholder="[email protected]">
        </div>
        <div class="md:col-span-2">
          <label for="message" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Your Message:</label>
          <textarea id="message" name="message" rows="4" class="w-full px-4 py-2 rounded-xl text-gray-700 dark:text-gray-200 bg-emerald-50 dark:bg-gray-700 border border-transparent
                    shadow-inner shadow-emerald-200/70 dark:shadow-gray-900/60
                    focus:outline-none focus:ring-2 focus:ring-sapphire-500/70 focus:border-transparent
                    transition-shadow duration-200" placeholder="Type your message here..."></textarea>
        </div>
        <div class="md:col-span-2 text-center">
          <button type="submit" class="inline-flex items-center px-8 py-3 rounded-xl text-lg font-bold
                     bg-emerald-600 text-white dark:bg-sapphire-600 dark:text-white
                     shadow-lg shadow-emerald-400/60 dark:shadow-sapphire-900/60
                     hover:bg-emerald-700 dark:hover:bg-sapphire-700
                     hover:scale-105 active:scale-95 active:shadow-inner active:shadow-emerald-700/40 dark:active:shadow-sapphire-900/40
                     transition-all duration-300 ease-in-out focus:outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-sapphire-800">
            <svg class="w-6 h-6 mr-3 -ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l.649-.186.931-2.022 1.347.865a1 1 0 001.455-.008l4.475-4.475 2.022-.931.186-.649a1 1 0 00-1.409-1.169l-14-7z"></path></svg>
            Send Message
          </button>
        </div>
      </form>
    </section>

    <!-- Placeholder for related content / images -->
    <section class="mt-12 text-center">
      <h2 class="text-3xl font-bold text-sapphire-800 dark:text-sapphire-400 mb-6">Related Information</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <div class="rounded-2xl overflow-hidden bg-white dark:bg-gray-800 shadow-xl
                     shadow-sapphire-200/50 dark:shadow-gray-950/70
                     hover:shadow-sapphire-300/60 dark:hover:shadow-black/70
                     transition-all duration-300 ease-in-out transform hover:-translate-y-1">
          <img src="https://picsum.photos/id/600/300/200" alt="Placeholder image for city hall" class="w-full h-40 object-cover">
          <div class="p-4">
            <h3 class="font-bold text-lg text-gray-800 dark:text-gray-200 mb-2">City Hall Directory</h3>
            <p class="text-sm text-gray-600 dark:text-gray-400">Find contact information for all city departments.</p>
            <a href="#" class="mt-3 inline-block text-sapphire-600 dark:text-sapphire-400 hover:underline font-semibold">Learn More &rarr;</a>
          </div>
        </div>
        <div class="rounded-2xl overflow-hidden bg-white dark:bg-gray-800 shadow-xl
                     shadow-sapphire-200/50 dark:shadow-gray-950/70
                     hover:shadow-sapphire-300/60 dark:hover:shadow-black/70
                     transition-all duration-300 ease-in-out transform hover:-translate-y-1">
          <img src="https://picsum.photos/id/400/300/200" alt="Placeholder image for local park" class="w-full h-40 object-cover">
          <div class="p-4">
            <h3 class="font-bold text-lg text-gray-800 dark:text-gray-200 mb-2">Local Park Initiatives</h3>
            <p class="text-sm text-gray-600 dark:text-gray-400">Discover new projects planned for our community parks.</p>
            <a href="#" class="mt-3 inline-block text-sapphire-600 dark:text-sapphire-400 hover:underline font-semibold">Learn More &rarr;</a>
          </div>
        </div>
        <div class="rounded-2xl overflow-hidden bg-white dark:bg-gray-800 shadow-xl
                     shadow-sapphire-200/50 dark:shadow-gray-950/70
                     hover:shadow-sapphire-300/60 dark:hover:shadow-black/70
                     transition-all duration-300 ease-in-out transform hover:-translate-y-1">
          <img src="https://picsum.photos/id/200/300/200" alt="Placeholder image for library" class="w-full h-40 object-cover">
          <div class="p-4">
            <h3 class="font-bold text-lg text-gray-800 dark:text-gray-200 mb-2">Library Services Update</h3>
            <p class="text-sm text-gray-600 dark:text-gray-400">Explore digital resources and upcoming library events.</p>
            <a href="#" class="mt-3 inline-block text-sapphire-600 dark:text-sapphire-400 hover:underline font-semibold">Learn More &rarr;</a>
          </div>
        </div>
        <div class="rounded-2xl overflow-hidden bg-white dark:bg-gray-800 shadow-xl
                     shadow-sapphire-200/50 dark:shadow-gray-950/70
                     hover:shadow-sapphire-300/60 dark:hover:shadow-black/70
                     transition-all duration-300 ease-in-out transform hover:-translate-y-1">
          <img src="https://picsum.photos/id/100/300/200" alt="Placeholder image for community event" class="w-full h-40 object-cover">
          <div class="p-4">
            <h3 class="font-bold text-lg text-gray-800 dark:text-gray-200 mb-2">Upcoming Public Events</h3>
            <p class="text-sm text-gray-600 dark:text-gray-400">Check out the calendar for local gatherings and festivals.</p>
            <a href="#" class="mt-3 inline-block text-sapphire-600 dark:text-sapphire-400 hover:underline font-semibold">Learn More &rarr;</a>
          </div>
        </div>
      </div>
    </section>

  </div>

  <!-- Dark mode toggle - For demonstration, can be a button elsewhere -->
  <div class="mt-12 text-center">
    <button onclick="document.documentElement.classList.toggle('dark')" class="px-6 py-2 rounded-full
      bg-gray-200 text-gray-800 dark:bg-gray-800 dark:text-gray-200
      shadow-md dark:shadow-xl
      hover:shadow-lg dark:hover:shadow-black
      active:shadow-inner dark:active:shadow-gray-700
      transition-all duration-300 ease-in-out font-medium">
      Toggle Dark Mode
    </button>
  </div>

  <style>
    /* Custom colors for Jewel Tones (adjust as needed for specific shades) */
    .text-emerald-800 { color: #047857; } /* green-700 */
    .dark .text-emerald-400 { color: #34d399; } /* green-400 */
    .border-emerald-400\/50 { border-color: rgba(74, 222, 128, 0.5); } /* green-400 with opacity */
    .dark .border-emerald-700\/50 { border-color: rgba(4 120 87, 0.5); } /* green-700 with opacity */
    .bg-emerald-50 { background-color: #ecfdf5; }
    .bg-emerald-100 { background-color: #d1fae5; }
    .bg-emerald-200 { background-color: #a7f3d0; }
    .bg-emerald-300\/40 { background-color: rgba(110, 231, 183, 0.4); } /* green-300 with opacity */
    .group-hover\:bg-emerald-400\/60:hover { background-color: rgba(74, 222, 128, 0.6); }
    .text-emerald-700 { color: #047857; /* green-700 */ }
    .dark .text-emerald-300 { color: #6ee7b7; }
    .shadow-emerald-300\/60 { box-shadow: 0 10px 15px -3px rgba(110, 231, 183, 0.6), 0 4px 6px -2px rgba(110, 231, 183, 0.6); }
    .hover\:shadow-emerald-400\/70:hover { box-shadow: 0 10px 15px -3px rgba(74, 222, 128, 0.7), 0 4px 6px -2px rgba(74, 222, 128, 0.7); }
    .active\:shadow-inner\.shadow-emerald-400\/40:active { box-shadow: inset 0 2px 4px 0 rgba(74, 222, 128, 0.4); }
    .bg-emerald-600 { background-color: #059669; } /* green-600 */
    .shadow-emerald-400\/60 { box-shadow: 0 10px 15px -3px rgba(74, 222, 128, 0.6), 0 4px 6px -2px rgba(74, 222, 128, 0.6); }
    .hover\:bg-emerald-700:hover { background-color: #047857; }
    .active\:shadow-inner\.shadow-emerald-700\/40:active { box-shadow: inset 0 2px 4px 0 rgba(4, 120, 87, 0.4); }
    .focus\:ring-emerald-300:focus { --tw-ring-color: #a7f3d0 !important; }

    .text-sapphire-700 { color: #1d4ed8; } /* blue-700 */
    .dark .text-sapphire-300 { color: #93c5fd; } /* blue-300 */
    .text-sapphire-800 { color: #1e40af; } /* blue-800 */
    .dark .text-sapphire-400 { color: #60a5fa; } /* blue-400 */
    .border-sapphire-400\/50 { border-color: rgba(96, 165, 250, 0.5); }
    .dark .border-sapphire-700\/50 { border-color: rgba(29, 78, 216, 0.5); }
    .bg-sapphire-50 { background-color: #eff6ff; }
    .bg-sapphire-100 { background-color: #dbeafe; }
    .bg-sapphire-200 { background-color: #bfdbfe; }
    .bg-sapphire-300\/40 { background-color: rgba(147, 197, 253, 0.4); }
    .group-hover\:bg-sapphire-400\/60:hover { background-color: rgba(96, 165, 250, 0.6); }
    .shadow-sapphire-300\/60 { box-shadow: 0 10px 15px -3px rgba(147, 197, 253, 0.6), 0 4px 6px -2px rgba(147, 197, 253, 0.6); }
    .hover\:shadow-sapphire-400\/70:hover { box-shadow: 0 10px 15px -3px rgba(96, 165, 250, 0.7), 0 4px 6px -2px rgba(96, 165, 250, 0.7); }
    .active\:shadow-inner\.shadow-sapphire-400\/40:active { box-shadow: inset 0 2px 4px 0 rgba(96, 165, 250, 0.4); }
    .bg-sapphire-600 { background-color: #2563eb; }
    .shadow-sapphire-900\/60 { box-shadow: 0 10px 15px -3px rgba(17, 24, 39, 0.6), 0 4px 6px -2px rgba(17, 24, 39, 0.6); }
    .hover\:bg-sapphire-700:hover { background-color: #1d4ed8; }
    .active\:shadow-inner\.shadow-sapphire-900\/40:active { box-shadow: inset 0 2px 4px 0 rgba(17, 24, 39, 0.4); }
    .focus\:ring-sapphire-800:focus { --tw-ring-color: #1e40af !important; }
    .focus\:ring-sapphire-500\/70:focus { --tw-ring-color: rgba(59, 130, 246, 0.7) !important; }

    .text-ruby-700 { color: #be123c; } /* rose-700 */
    .dark .text-rose-300 { color: #fda4af; } /* rose-300 */
    .text-ruby-800 { color: #9f1239; } /* rose-800 */
    .dark .text-rose-400 { color: #fb7185; } /* rose-400 */
    .border-ruby-400\/50 { border-color: rgba(251, 113, 133, 0.5); }
    .dark .border-ruby-700\/50 { border-color: rgba(190, 18, 60, 0.5); }
    .bg-ruby-50 { background-color: #fff1f2; }
    .bg-ruby-100 { background-color: #ffe4e6; }
    .bg-ruby-200 { background-color: #fecdd3; }
    .bg-ruby-300\/40 { background-color: rgba(253, 164, 175, 0.4); }
    .group-hover\:bg-ruby-400\/60:hover { background-color: rgba(251, 113, 133, 0.6); }
    .shadow-ruby-300\/60 { box-shadow: 0 10px 15px -3px rgba(253, 164, 175, 0.6), 0 4px 6px -2px rgba(253, 164, 175, 0.6); }
    .hover\:shadow-ruby-400\/70:hover { box-shadow: 0 10px 15px -3px rgba(251, 113, 133, 0.7), 0 4px 6px -2px rgba(251, 113, 133, 0.7); }
    .active\:shadow-inner\.shadow-ruby-400\/40:active { box-shadow: inset 0 2px 4px 0 rgba(251, 113, 133, 0.4); }

    .bg-indigo-50 { background-color: #eef2ff; }
    .bg-indigo-100\/50 { background-color: rgba(224, 231, 255, 0.5); }
    .bg-indigo-200\/50 { background-color: rgba(199,210,254, 0.5); }
    .text-indigo-600 { color: #4f46e5; }
    .text-indigo-700 { color: #4338ca; }
    .text-indigo-800 { color: #3730a3; }
    .dark .text-indigo-300 { color: #a5b4fc; }
    .dark .text-indigo-400 { color: #818cf8; }
    .shadow-indigo-300\/60 { box-shadow: 0 10px 15px -3px rgba(165, 180, 252, 0.6), 0 4px 6px -2px rgba(165, 180, 252, 0.6); }
    .hover\:shadow-indigo-400\/70:hover { box-shadow: 0 10px 15px -3px rgba(129, 140, 248, 0.7), 0 4px 6px -2px rgba(129, 140, 248, 0.7); }
    .active\:shadow-inner\.shadow-indigo-400\/40:active { box-shadow: inset 0 2px 4px 0 rgba(129, 140, 248, 0.4); }

    /* General neumorphism shadows */
    .shadow-xl {
        box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1), -10px -10px 20px rgba(255, 255, 255, 0.7);
    }
    .dark .shadow-xl {
        box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.4), -10px -10px 20px rgba(255, 255, 255, 0.05);
    }

    .shadow-md {
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.07), -5px -5px 10px rgba(255, 255, 255, 0.5);
    }
    .dark .shadow-md {
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3), -5px -5px 10px rgba(255, 255, 255, 0.03);
    }

    .shadow-inner {
        box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.05), inset -5px -5px 10px rgba(255, 255, 255, 0.5);
    }
    .dark .shadow-inner {
        box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3), inset -5px -5px 10px rgba(255, 255, 255, 0.03);
    }

    /* Hover and Active states for neumorphism */
    .hover\:shadow-lg:hover {
        box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.12), -8px -8px 16px rgba(255, 255, 255, 0.75);
    }
    .dark .hover\:shadow-black:hover {
        box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.5), -8px -8px 16px rgba(0, 0, 0, 0.1);
    }

    .active\:shadow-inner:active {
        box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.1), inset -5px -5px 10px rgba(255, 255, 255, 0.6);
    }
    .dark .active\:shadow-gray-700:active {
        box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.4), inset -5px -5px 10px rgba(255, 255, 255, 0.06);
    }


    /* Specific custom shadows for inputs for a deeper inner effect */
    .shadow-inner\.shadow-emerald-200\/70 {
        box-shadow: inset 5px 5px 10px rgba(220, 252, 231, 0.7), inset -5px -5px 10px rgba(255, 255, 255, 0.8);
    }
    .dark .shadow-inner\.shadow-gray-900\/60 {
        box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.6), inset -5px -5px 10px rgba(255, 255, 255, 0.07);
    }

  </style>
</div>

Site Map Component

A simple, responsive sitemap component for Technology/SaaS applications with a dark mode UI and a rainbow gradient accent. Optimized for minimal elements and clear navigation.

Open Preview

                <footer class="bg-gray-950 text-gray-300 py-8 md:py-12 lg:py-16 dark:bg-gray-950">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-8 text-center md:text-left">

      <div class="col-span-1">
        <h3 class="text-lg font-semibold text-white mb-4 bg-clip-text text-transparent bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 inline-block">Product</h3>
        <ul class="space-y-2">
          <li><a href="#" class="hover:text-white transition-colors duration-200">Features</a></li>
          <li><a href="#" class="hover:text-white transition-colors duration-200">Pricing</a></li>
          <li><a href="#" class="hover:text-white transition-colors duration-200">Integrations</a></li>
          <li><a href="#" class="hover:text-white transition-colors duration-200">Roadmap</a></li>
        </ul>
      </div>

      <div class="col-span-1">
        <h3 class="text-lg font-semibold text-white mb-4 bg-clip-text text-transparent bg-gradient-to-r from-green-500 via-blue-500 to-indigo-500 inline-block">Company</h3>
        <ul class="space-y-2">
          <li><a href="#" class="hover:text-white transition-colors duration-200">About Us</a></li>
          <li><a href="#" class="hover:text-white transition-colors duration-200">Careers</a></li>
          <li><a href="#" class="hover:text-white transition-colors duration-200">Blog</a></li>
          <li><a href="#" class="hover:text-white transition-colors duration-200">Partners</a></li>
        </ul>
      </div>

      <div class="col-span-1">
        <h3 class="text-lg font-semibold text-white mb-4 bg-clip-text text-transparent bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 inline-block">Resources</h3>
        <ul class="space-y-2">
          <li><a href="#" class="hover:text-white transition-colors duration-200">Documentation</a></li>
          <li><a href="#" class="hover:text-white transition-colors duration-200">Support</a></li>
          <li><a href="#" class="hover:text-white transition-colors duration-200">Community</a></li>
          <li><a href="#" class="hover:text-white transition-colors duration-200">API Status</a></li>
        </ul>
      </div>

      <div class="col-span-1">
        <h3 class="text-lg font-semibold text-white mb-4 bg-clip-text text-transparent bg-gradient-to-r from-pink-500 via-orange-500 to-red-500 inline-block">Legal</h3>
        <ul class="space-y-2">
          <li><a href="#" class="hover:text-white transition-colors duration-200">Privacy Policy</a></li>
          <li><a href="#" class="hover:text-white transition-colors duration-200">Terms of Service</a></li>
          <li><a href="#" class="hover:text-white transition-colors duration-200">Cookie Policy</a></li>
          <li><a href="#" class="hover:text-white transition-colors duration-200">Compliance</a></li>
        </ul>
      </div>

      <div class="col-span-1 md:col-span-3 lg:col-span-1 flex flex-col items-center md:items-start space-y-4">
        <h3 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-red-500 via-yellow-400 via-green-400 via-blue-400 via-indigo-400 to-purple-500 inline-block">YourApp</h3>
        <p class="text-sm text-gray-500 dark:text-gray-400 text-center md:text-left">Building the future of SaaS.</p>
        <div class="flex space-x-4">
          <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200" aria-label="Twitter">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M8.29 20.251c-1.83 0-3.32-.49-4.81-1.48C2.18 17.77 1 15.53 1 12.5c0-2.88 1.18-5.11 3.29-6.42.06-.03.1-.05.15-.07.08-.03.17-.06.25-.09.32-.12.65-.22.99-.31 1.7-.49 3.5-.83 5.3-.83 1.94 0 3.79.34 5.56.96.96.34 1.87.8 2.72 1.34.85.54 1.63 1.18 2.34 1.89.71.71 1.35 1.49 1.89 2.34.54.85.98 1.76 1.34 2.73.62 1.77.96 3.63.96 5.56 0 2.8-1.04 4.86-3.13 6.18-2.09 1.32-4.57 1.98-7.44 1.98zM9.5 13.91l8.77-8.77 2.11 2.11-8.77 8.77-4.11-4.11L9.5 13.91z" fill="currentColor"/>
              <path d="M22.251 17.581c-.552 0-1 .448-1 1s.448 1 1 1h.75c.552 0 1-.448 1-1s-.448-1-1-1h-.75zM1.751 17.581c.552 0 1 .448 1 1s-.448 1-1 1h-.75c-.552 0-1-.448-1-1s.448-1 1-1h.75z" fill="currentColor"/>
            </svg>
          </a>
          <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200" aria-label="LinkedIn">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M19 0H5a5 5 0 00-5 5v14a5 5 0 005 5h14a5 5 0 005-5V5a5 5 0 00-5-5zM8 19H5V8h3v11zM6.5 6.73a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM19 19h-3v-4.75c0-1.4-.47-2.37-1.76-2.37-1.35 0-2.14 1.02-2.14 2.37V19h-3V8h3v1.75s.9-1.63 2.87-1.63c2.25 0 3.13 1.55 3.13 4.88V19z" fill="currentColor"/>
            </svg>
          </a>
          <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200" aria-label="GitHub">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.83 9.504.475.087.687-.206.687-.456 0-.227-.007-.75-.011-1.849-2.782.607-3.368-1.341-3.368-1.341-.454-1.15-.111-1.458-.111-1.458.37-.26.02-.255.02-.255.407-.03.62.261.62.261.363.626.953.444 1.187.34.037-.266.142-.444.258-.546-1.076-.123-2.203-.538-2.203-2.404 0-.53.192-.964.507-1.304-.05-.123-.22-.616.04-.123 0 0 .415.13.882.3.82-.254 1.69-.395 2.578-.395.888 0 1.758.14 2.578.395.467-.17.882-.3.882-.3.268.51.098.393.04.123.315.34.507.773.507 1.304 0 1.868-1.127 2.278-2.208 2.399.14.12.27.359.27.727 0 .524-.005 1.894-.01 2.146 0 .252.213.547.688.455C21.139 20.19 24 16.435 24 12.017c0-5.533-4.477-10.017-10-10.017H12z" clip-rule="evenodd" />
            </svg>
          </a>
        </div>
      </div>

    </div>

    <div class="mt-8 pt-8 border-t border-gray-800 text-center text-gray-500 text-sm dark:border-gray-700">
      <p>&copy; 2023 YourApp, Inc. All rights reserved.</p>
    </div>
  </div>
</footer>

Retro_Healthcare_Sitemap_Component

A simple, responsive sitemap component with a retro/vintage aesthetic, analogous color scheme, suitable for healthcare applications, including dark mode support.

Open Preview

                <div class="font-mono text-gray-800 bg-gradient-to-br from-indigo-200 via-purple-200 to-pink-200 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 dark:text-gray-200 p-6 sm:p-8 lg:p-12 min-h-screen">
  <div class="max-w-6xl mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-lg border-2 border-purple-500 dark:border-pink-500 overflow-hidden">
    <div class="p-6 sm:p-8 lg:p-10 border-b border-purple-300 dark:border-pink-700 bg-purple-100 dark:bg-gray-900">
      <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-pink-400 mb-2 text-center tracking-wider uppercase">
        <span class="text-purple-600 dark:text-indigo-400">MediCorp</span> Sitemap
      </h1>
      <p class="text-center text-gray-600 dark:text-gray-400 text-lg sm:text-xl">Navigate our digital archive</p>
    </div>

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

      <!-- Section 1: About Us -->
      <div class="border-2 border-indigo-400 dark:border-indigo-600 rounded-lg p-5 bg-indigo-50 dark:bg-gray-700 shadow-md transform hover:scale-105 transition-transform duration-300">
        <h2 class="text-2xl font-bold text-indigo-700 dark:text-indigo-300 mb-3 uppercase tracking-wide">About Us</h2>
        <ul class="space-y-2 text-gray-700 dark:text-gray-300">
          <li><a href="#" class="hover:text-indigo-900 dark:hover:text-indigo-100 underline decoration-indigo-400 hover:decoration-indigo-700 dark:decoration-indigo-600 dark:hover:decoration-indigo-300 text-lg">Our Mission</a></li>
          <li><a href="#" class="hover:text-indigo-900 dark:hover:text-indigo-100 underline decoration-indigo-400 hover:decoration-indigo-700 dark:decoration-indigo-600 dark:hover:decoration-indigo-300 text-lg">Our History</a></li>
          <li><a href="#" class="hover:text-indigo-900 dark:hover:text-indigo-100 underline decoration-indigo-400 hover:decoration-indigo-700 dark:decoration-indigo-600 dark:hover:decoration-indigo-300 text-lg">Leadership Team</a></li>
          <li><a href="#" class="hover:text-indigo-900 dark:hover:text-indigo-100 underline decoration-indigo-400 hover:decoration-indigo-700 dark:decoration-indigo-600 dark:hover:decoration-indigo-300 text-lg">Careers</a></li>
        </ul>
      </div>

      <!-- Section 2: Services -->
      <div class="border-2 border-purple-400 dark:border-purple-600 rounded-lg p-5 bg-purple-50 dark:bg-gray-700 shadow-md transform hover:scale-105 transition-transform duration-300">
        <h2 class="text-2xl font-bold text-purple-700 dark:text-purple-300 mb-3 uppercase tracking-wide">Services</h2>
        <ul class="space-y-2 text-gray-700 dark:text-gray-300 leading-relaxed">
          <li><a href="#" class="hover:text-purple-900 dark:hover:text-purple-100 underline decoration-purple-400 hover:decoration-purple-700 dark:decoration-purple-600 dark:hover:decoration-purple-300  text-lg">Primary Care</a></li>
          <li><a href="#" class="hover:text-purple-900 dark:hover:text-purple-100 underline decoration-purple-400 hover:decoration-purple-700 dark:decoration-purple-600 dark:hover:decoration-purple-300  text-lg">Specialties</a></li>
          <li><a href="#" class="hover:text-purple-900 dark:hover:text-purple-100 underline decoration-purple-400 hover:decoration-purple-700 dark:decoration-purple-600 dark:hover:decoration-purple-300  text-lg">Emergency</a></li>
          <li><a href="#" class="hover:text-purple-900 dark:hover:text-purple-100 underline decoration-purple-400 hover:decoration-purple-700 dark:decoration-purple-600 dark:hover:decoration-purple-300  text-lg">Telehealth</a></li>
        </ul>
      </div>

      <!-- Section 3: Patients & Visitors -->
      <div class="border-2 border-pink-400 dark:border-pink-600 rounded-lg p-5 bg-pink-50 dark:bg-gray-700 shadow-md transform hover:scale-105 transition-transform duration-300">
        <h2 class="text-2xl font-bold text-pink-700 dark:text-pink-300 mb-3 uppercase tracking-wide">Patients & Visitors</h2>
        <ul class="space-y-2 text-gray-700 dark:text-gray-300 leading-relaxed">
          <li><a href="#" class="hover:text-pink-900 dark:hover:text-pink-100 underline decoration-pink-400 hover:decoration-pink-700 dark:decoration-pink-600 dark:hover:decoration-pink-300  text-lg">Patient Portal</a></li>
          <li><a href="#" class="hover:text-pink-900 dark:hover:text-pink-100 underline decoration-pink-400 hover:decoration-pink-700 dark:decoration-pink-600 dark:hover:decoration-pink-300  text-lg">Appointments</a></li>
          <li><a href="#" class="hover:text-pink-900 dark:hover:text-pink-100 underline decoration-pink-400 hover:decoration-pink-700 dark:decoration-pink-600 dark:hover:decoration-pink-300  text-lg">Visiting Hours</a></li>
          <li><a href="#" class="hover:text-pink-900 dark:hover:text-pink-100 underline decoration-pink-400 hover:decoration-pink-700 dark:decoration-pink-600 dark:hover:decoration-pink-300  text-lg">Billing & Insurance</a></li>
        </ul>
      </div>

      <!-- Section 4: Health Resources -->
      <div class="border-2 border-indigo-400 dark:border-indigo-600 rounded-lg p-5 bg-indigo-50 dark:bg-gray-700 shadow-md transform hover:scale-105 transition-transform duration-300">
        <h2 class="text-2xl font-bold text-indigo-700 dark:text-indigo-300 mb-3 uppercase tracking-wide">Resources</h2>
        <ul class="space-y-2 text-gray-700 dark:text-gray-300 leading-relaxed">
          <li><a href="#" class="hover:text-indigo-900 dark:hover:text-indigo-100 underline decoration-indigo-400 hover:decoration-indigo-700 dark:decoration-indigo-600 dark:hover:decoration-indigo-300  text-lg">Health Blog</a></li>
          <li><a href="#" class="hover:text-indigo-900 dark:hover:text-indigo-100 underline decoration-indigo-400 hover:decoration-indigo-700 dark:decoration-indigo-600 dark:hover:decoration-indigo-300  text-lg">Medical Library</a></li>
          <li><a href="#" class="hover:text-indigo-900 dark:hover:text-indigo-100 underline decoration-indigo-400 hover:decoration-indigo-700 dark:decoration-indigo-600 dark:hover:decoration-indigo-300  text-lg">Events & Classes</a></li>
          <li><a href="#" class="hover:text-indigo-900 dark:hover:text-indigo-100 underline decoration-indigo-400 hover:decoration-indigo-700 dark:decoration-indigo-600 dark:hover:decoration-indigo-300  text-lg">FAQs</a></li>
        </ul>
      </div>

      <!-- Section 5: Locations -->
      <div class="border-2 border-purple-400 dark:border-purple-600 rounded-lg p-5 bg-purple-50 dark:bg-gray-700 shadow-md transform hover:scale-105 transition-transform duration-300">
        <h2 class="text-2xl font-bold text-purple-700 dark:text-purple-300 mb-3 uppercase tracking-wide">Locations</h2>
        <ul class="space-y-2 text-gray-700 dark:text-gray-300 leading-relaxed">
          <li><a href="#" class="hover:text-purple-900 dark:hover:text-purple-100 underline decoration-purple-400 hover:decoration-purple-700 dark:decoration-purple-600 dark:hover:decoration-purple-300  text-lg">Find a Clinic</a></li>
          <li><a href="#" class="hover:text-purple-900 dark:hover:text-purple-100 underline decoration-purple-400 hover:decoration-purple-700 dark:decoration-purple-600 dark:hover:decoration-purple-300  text-lg">Hospitals</a></li>
          <li><a href="#" class="hover:text-purple-900 dark:hover:text-purple-100 underline decoration-purple-400 hover:decoration-purple-700 dark:decoration-purple-600 dark:hover:decoration-purple-300  text-lg">Directions</a></li>
          <li><a href="#" class="hover:text-purple-900 dark:hover:text-purple-100 underline decoration-purple-400 hover:decoration-purple-700 dark:decoration-purple-600 dark:hover:decoration-purple-300  text-lg">Parking</a></li>
        </ul>
      </div>

      <!-- Section 6: Contact Us -->
      <div class="border-2 border-pink-400 dark:border-pink-600 rounded-lg p-5 bg-pink-50 dark:bg-gray-700 shadow-md transform hover:scale-105 transition-transform duration-300">
        <h2 class="text-2xl font-bold text-pink-700 dark:text-pink-300 mb-3 uppercase tracking-wide">Contact Us</h2>
        <ul class="space-y-2 text-gray-700 dark:text-gray-300 leading-relaxed">
          <li><a href="#" class="hover:text-pink-900 dark:hover:text-pink-100 underline decoration-pink-400 hover:decoration-pink-700 dark:decoration-pink-600 dark:hover:decoration-pink-300  text-lg">General Inquiries</a></li>
          <li><a href="#" class="hover:text-pink-900 dark:hover:text-pink-100 underline decoration-pink-400 hover:decoration-pink-700 dark:decoration-pink-600 dark:hover:decoration-pink-300  text-lg">Feedback</a></li>
          <li><a href="#" class="hover:text-pink-900 dark:hover:text-pink-100 underline decoration-pink-400 hover:decoration-pink-700 dark:decoration-pink-600 dark:hover:decoration-pink-300  text-lg">Call Us</a></li>
          <li><a href="#" class="hover:text-pink-900 dark:hover:text-pink-100 underline decoration-pink-400 hover:decoration-pink-700 dark:decoration-pink-600 dark:hover:decoration-pink-300  text-lg">Email Us</a></li>
        </ul>
      </div>

    </div>

    <div class="p-6 sm:p-8 lg:p-10 text-center text-gray-600 dark:text-gray-400 border-t border-purple-300 dark:border-pink-700 bg-purple-100 dark:bg-gray-900">
      <p class="text-lg sm:text-xl">&copy; 2023 MediCorp. All rights reserved.</p>
    </div>
  </div>
</div>

Neumorphic_Real_Estate_Sitemap_Component

A simple, responsive neumorphic site map component for real estate platforms with a gradient rainbow color scheme and dark mode support.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 font-sans">
  <div class="w-full max-w-4xl p-6 sm:p-8 lg:p-10 rounded-3xl backdrop-blur-sm shadow-xl
              bg-gradient-to-br from-green-300 via-blue-300 to-purple-300
              dark:from-gray-800 dark:via-gray-850 dark:to-gray-900
              dark:shadow-[inset_0_2px_4px_rgba(0,0,0,0.6),_0_4px_8px_rgba(0,0,0,0.8)]
              shadow-[inset_0_2px_4px_rgba(255,255,255,0.7),_0_4px_8px_rgba(150,150,150,0.3)]
              transform transition-all duration-300 ease-in-out">
    <h2 class="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-center mb-8
               bg-clip-text text-transparent bg-gradient-to-r from-red-500 via-yellow-500 to-indigo-500
               dark:from-red-300 dark:via-yellow-300 dark:to-indigo-300
               drop-shadow-lg">
      Explore Our Properties
    </h2>

    <nav class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
      <!-- Category 1: Buy Homes -->
      <div class="p-5 rounded-2xl flex flex-col items-center justify-center
                  bg-gray-200 dark:bg-gray-800
                  shadow-[5px_5px_10px_#bebebe,-5px_-5px_10px_#ffffff]
                  dark:shadow-[5px_5px_10px_#0a0a0a,-5px_-5px_10px_#262626]
                  transform transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-[7px_7px_14px_#bebebe,-7px_-7px_14px_#ffffff]
                  dark:hover:shadow-[7px_7px_14px_#0a0a0a,-7px_-7px_14px_#262626]">
        <h3 class="text-lg sm:text-xl font-semibold mb-3
                   bg-clip-text text-transparent bg-gradient-to-r from-teal-500 to-cyan-500
                   dark:from-teal-300 dark:to-cyan-300">
          Buy Homes
        </h3>
        <ul class="text-center space-y-2 text-gray-700 dark:text-gray-300">
          <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400 text-sm sm:text-base">Houses for Sale</a></li>
          <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400 text-sm sm:text-base">Condos & Apartments</a></li>
          <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400 text-sm sm:text-base">New Constructions</a></li>
          <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400 text-sm sm:text-base">Luxury Estates</a></li>
        </ul>
      </div>

      <!-- Category 2: Rent Homes -->
      <div class="p-5 rounded-2xl flex flex-col items-center justify-center
                  bg-gray-200 dark:bg-gray-800
                  shadow-[5px_5px_10px_#bebebe,-5px_-5px_10px_#ffffff]
                  dark:shadow-[5px_5px_10px_#0a0a0a,-5px_-5px_10px_#262626]
                  transform transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-[7px_7px_14px_#bebebe,-7px_-7px_14px_#ffffff]
                  dark:hover:shadow-[7px_7px_14px_#0a0a0a,-7px_-7px_14px_#262626]">
        <h3 class="text-lg sm:text-xl font-semibold mb-3
                   bg-clip-text text-transparent bg-gradient-to-r from-orange-500 to-yellow-500
                   dark:from-orange-300 dark:to-yellow-300">
          Rent Homes
        </h3>
        <ul class="text-center space-y-2 text-gray-700 dark:text-gray-300">
          <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400 text-sm sm:text-base">Houses for Rent</a></li>
          <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400 text-sm sm:text-base">Apartments for Rent</a></li>
          <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400 text-sm sm:text-base">Pet-Friendly Rentals</a></li>
          <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400 text-sm sm:text-base">Short-Term Rentals</a></li>
        </ul>
      </div>

      <!-- Category 3: Sell Your Home -->
      <div class="p-5 rounded-2xl flex flex-col items-center justify-center
                  bg-gray-200 dark:bg-gray-800
                  shadow-[5px_5px_10px_#bebebe,-5px_-5px_10px_#ffffff]
                  dark:shadow-[5px_5px_10px_#0a0a0a,-5px_-5px_10px_#262626]
                  transform transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-[7px_7px_14px_#bebebe,-7px_-7px_14px_#ffffff]
                  dark:hover:shadow-[7px_7px_14px_#0a0a0a,-7px_-7px_14px_#262626]">
        <h3 class="text-lg sm:text-xl font-semibold mb-3
                   bg-clip-text text-transparent bg-gradient-to-r from-purple-500 to-pink-500
                   dark:from-purple-300 dark:to-pink-300">
          Sell Your Home
        </h3>
        <ul class="text-center space-y-2 text-gray-700 dark:text-gray-300">
          <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400 text-sm sm:text-base">Get a Home Value</a></li>
          <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400 text-sm sm:text-base">Find an Agent</a></li>
          <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400 text-sm sm:text-base">Selling Process</a></li>
          <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400 text-sm sm:text-base">Listing Your Property</a></li>
        </ul>
      </div>
    </nav>

    <div class="mt-10 pt-6 border-t-2 border-gray-300 dark:border-gray-700
                flex flex-col sm:flex-row justify-between items-center text-center sm:text-left">
      <p class="text-gray-600 dark:text-gray-400 text-sm sm:text-base mb-4 sm:mb-0">© 2023 Real Estate Inc. All rights reserved.</p>
      <ul class="flex flex-wrap justify-center sm:justify-start space-x-4 sm:space-x-6 text-gray-700 dark:text-gray-300 text-sm sm:text-base">
        <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400">Privacy Policy</a></li>
        <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400">Terms of Service</a></li>
        <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400">Contact Us</a></li>
      </ul>
    </div>
  </div>
</div>

Search Components

Categories

Site Map

Site Map Component

Neumorphic_Industrial_Sitemap

Neumorphism Vibrant Site Map Component

Industrial_Site_Map_Component

Site Map Component

Social Media Site Map Component

Neumorphic Site Map Component

Site Map Component

Retro_Healthcare_Sitemap_Component

Neumorphic_Real_Estate_Sitemap_Component