検索コンポーネント

カテゴリ

サイトマップ

Webサイト構造の階層表示

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

企業/プロフェッショナルスタイルとアーストーンの配色を備えた、複雑でレスポンシブなサイトマップコンポーネントで、ビジネス Web サイトに適しています。ダークモードのサポートが含まれています。

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

Neumorphic_Industrial_Sitemap

工業および製造企業向けのレスポンシブなニューモーフィックサイトマップコンポーネントで、単色の配色とダークモードのサポートが特徴です。要素は、微妙な影を使用して背景から押し出されているように見えます。

開けるプレビュー

                <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 コンポーネント

ニューモーフィックスタイルと鮮やかな配色でデザインされたシンプルでレスポンシブなサイトマップコンポーネントで、ドキュメントやWikiサイトに適しています。ダークモードのサポートが含まれています。

開けるプレビュー

                <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

温かみのあるニュートラルを使用した、工業デザインの美学を備えた農業/農業Webサイト用のサイトマップコンポーネント。レスポンシブレイアウト、ダークモードのサポート、インタラクティブリンクセクションを備えています。

開けるプレビュー

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

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

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

開けるプレビュー

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

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

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

開けるプレビュー

                <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 コンポーネント

宝石のような色調のニューモーフィックスタイルで設計された複雑で応答性の高いサイトマップコンポーネントで、ダークモードのサポートなど、政府や公共サービスの Web サイトに適しています。

開けるプレビュー

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

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

ダークモードUIとレインボーグラデーションアクセントを備えたテクノロジー/ SaaSアプリケーション用のシンプルでレスポンシブなサイトマップコンポーネント。最小限の要素と明確なナビゲーションに最適化されています。

開けるプレビュー

                <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

レトロ/ビンテージの美的美学、類似の配色を備えたシンプルでレスポンシブなサイトマップコンポーネントで、ダークモードのサポートを含むヘルスケアアプリケーションに適しています。

開けるプレビュー

                <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

不動産プラットフォーム向けのシンプルでレスポンシブなニューモーフィックサイトマップコンポーネントで、グラデーションの虹色の配色とダークモードのサポートを備えています。

開けるプレビュー

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