Components Site Map Glassmorphism Site Map Component
Glassmorphism Site Map Component

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

HTML Code

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

Site Map Component

A Site Map Component designed in a Brutalism style with a dark theme, ideal for professional business websites. It features a bold layout with high contrast and interactive elements.
Open
Site Map Component

A complex site map component implementing skeuomorphism design style with earth tones color scheme, supporting a dark theme. Designed for blog/content purposes with interactive elements, using Tailwind CSS.
Open
Site Map Component

Site Map Component with Minimalist/Flat Design, responsive effects, and dark theme support.
Open