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 komplexe Sitemap-Komponente, die den Skeuomorphismus-Designstil mit dem Farbschema in Erdtönen implementiert und ein dunkles Design unterstützt. Entwickelt für Blog-/Content-Zwecke mit interaktiven Elementen, unter Verwendung von Tailwind CSS.

Offen

Sitemap-Komponente

Eine responsive Sitemap-Komponente, die im Dunkelmodus mit Tailwind CSS erstellt wurde.

Offen