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

Social-Media-Sitemap-Komponente

Eine einfache, reaktionsschnelle Sitemap-Komponente für Social-Media-Schnittstellen mit Sepia-/Brauntönen und Unterstützung für den Dunkelmodus mit subtilen Hover-Mikrointeraktionen.

Offen

Sitemap-Komponente

Eine reaktionsschnelle Sitemap-Komponente, die für den Dunkelmodus mit Pastellfarben entwickelt wurde und für Dashboards geeignet ist.

Offen

Sitemap-Komponente

Eine reaktionsschnelle Sitemap-Komponente mit Mikrointeraktionen, Pastell-Farbschema und Unterstützung für dunkle Themen, die für E-Commerce-Websites geeignet ist. Es enthält eine Kopfzeile, eine Suchleiste und mehrere Kategorien mit Links.

Offen