検索コンポーネント

カテゴリ

サイトマップ

Webサイト構造の階層表示

サイトマップコンポーネント - ファイナンスバンキング

金融/銀行インターフェース用のシンプルでレスポンシブなサイトマップコンポーネントで、セピア/ブラウンの色調のダークモードUIが特徴です。デスクトップ、タブレット、モバイル向けに最適化されており、ダークモードを完全にサポートしています。

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

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

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

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

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

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

  </div>

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

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

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

開けるプレビュー

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

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

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

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

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

  </div>

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

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

Neon_Glow_Sports_Sitemap_Component

ネオン/グロー効果と高コントラストの色を備えたシンプルでレスポンシブなサイトマップコンポーネントで、スポーツ/フィットネスアプリケーション向けに調整されています。ダークモードのサポートが含まれています。

開けるプレビュー

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

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

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

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

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

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

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

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

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

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

    </div>
  </div>

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

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

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

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

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

マテリアルデザインの美学、パステルカラーの配色、ダークモードのサポートを備えたレスポンシブサイトマップコンポーネントで、デート/ソーシャルプラットフォームに適しています。

開けるプレビュー

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

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

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

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

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

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

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

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

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

    </div>

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

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

glassmorphism デザイン、類似の配色、およびダークモードのサポートを備えたレスポンシブサイトマップコンポーネントで、ビジネスや企業の Web サイトに適しています。

開けるプレビュー

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

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

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

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

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

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

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

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

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

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

ポートフォリオ用のシンプルで鮮やかな 3D にインスパイアされたサイトマップコンポーネントで、レスポンシブデザインと Tailwind CSS を使用したダークモードのサポートを備えています。

開けるプレビュー

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

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

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

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

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

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

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

マイクロインタラクション、パステルカラースキーム、ダークテーマのサポートを備えたレスポンシブサイトマップコンポーネントで、eコマースWebサイトに適しています。ヘッダー、検索バー、およびリンクを含むいくつかのカテゴリが含まれています。

開けるプレビュー

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

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

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

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

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

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

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

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

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

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

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

ソーシャルメディアインターフェース用に設計されたレトロ/ビンテージサイトマップコンポーネントで、単色の配色を使用しています。読みやすさと美的魅力を高めるために、ダークテーマのシンプルなレイアウトが特徴です。

開けるプレビュー

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

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

マテリアルデザインの原則でスタイル設定され、電子商取引用に最適化されたレスポンシブサイトマップコンポーネントで、パステルカラーとダークモードのサポートが特徴です。

開けるプレビュー

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

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

ブルータリズムスタイルでデザインされたレスポンシブサイトマップコンポーネントで、ビジネス/企業のWebサイト向けのダークテーマで、インタラクティブ機能が組み込まれています。

開けるプレビュー

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