CCHub Logo CCHub Tailwind Collection
Komponenten Sitemap Sitemap-Komponente

Sitemap-Komponente

Eine Sitemap-Komponente im Material Design-Stil für Social-Media-Schnittstellen mit Reaktionsfähigkeit und Unterstützung für den Dunkelmodus mit Tailwind CSS. Enthält Erdtöne und mittlere Komplexität für Social-Networking-Plattformen.

Vorschau

HTML-Code 

<div class="bg-stone-100 text-stone-800 p-8 dark:bg-stone-800 dark:text-stone-200">
  <div class="container mx-auto">
    <h2 class="text-3xl font-bold mb-6">Site Map</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <div>
        <h3 class="text-xl font-semibold mb-4">General</h3>
        <ul>
          <li class="mb-2"><a href="#" class="hover:underline">Home</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">About Us</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Contact</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Blog</a></li>
        </ul>
      </div>
      <div>
        <h3 class="text-xl font-semibold mb-4">Account</h3>
        <ul>
          <li class="mb-2"><a href="#" class="hover:underline">Profile</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Settings</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Privacy</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Security</a></li>
        </ul>
      </div>
      <div>
        <h3 class="text-xl font-semibold mb-4">Social</h3>
        <ul>
          <li class="mb-2"><a href="#" class="hover:underline">Feed</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Messages</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Friends</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Groups</a></li>
        </ul>
      </div>
      <div>
        <h3 class="text-xl font-semibold mb-4">Resources</h3>
        <ul>
          <li class="mb-2"><a href="#" class="hover:underline">Help Center</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">FAQs</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Terms of Service</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Privacy Policy</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Verwandte Komponenten

Sitemap-Komponente

Eine responsive Sitemap-Komponente, die mit Glasmorphismus gestaltet wurde und einen mattglasähnlichen durchscheinenden Effekt und eine Unschärfe für ein Portfolio bietet, in dem Arbeiten oder Produkte präsentiert werden. Es unterstützt ein dunkles Thema und verwendet Komplementärfarben, während es eine moderate Komplexität beibehält.

Offen

Sitemap-Komponente

Eine Sitemap-Komponente im Retro-/Vintage-Stil mit responsiven Effekten und Unterstützung für dunkle Themen.

Offen

Sitemap-Komponente

Eine Siteübersichtskomponente im 3D-Stil mit responsivem Design und Unterstützung für den Dunkelmodus. Es verfügt über dreidimensionale Elemente für Tiefe und Engagement, wobei zufällige Platzhalterbilder und Avatare verwendet werden.

Offen