CCHub Logo CCHub Tailwind Collection
Komponenten Sitemap Sitemap-Komponente

Sitemap-Komponente

Eine neumorphe Siteübersichtskomponente mit responsivem Design und Unterstützung für den Dunkelmodus.

Vorschau

HTML-Code 

<div class="container mx-auto p-4 bg-gray-200 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark rounded-lg">
  <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Site Map</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <h3 class="font-semibold text-gray-700 dark:text-gray-200">Section 1</h3>
      <ul class="mt-2 space-y-2 text-gray-600 dark:text-gray-300">
        <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Link 1</a></li>
        <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Link 2</a></li>
        <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Link 3</a></li>
      </ul>
    </div>
    <div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <h3 class="font-semibold text-gray-700 dark:text-gray-200">Section 2</h3>
      <ul class="mt-2 space-y-2 text-gray-600 dark:text-gray-300">
        <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Link A</a></li>
        <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Link B</a></li>
        <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Link C</a></li>
      </ul>
    </div>
    <div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <h3 class="font-semibold text-gray-700 dark:text-gray-200">Section 3</h3>
      <ul class="mt-2 space-y-2 text-gray-600 dark:text-gray-300">
        <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Page X</a></li>
        <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Page Y</a></li>
        <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Page Z</a></li>
      </ul>
    </div>
  </div>
</div>

Verwandte Komponenten

Neumorphism Vibrant Sitemap-Komponente

Eine einfache, reaktionsschnelle Sitemap-Komponente, die mit einem neumorphen Stil und einem lebendigen Farbschema gestaltet wurde und sich für Dokumentations- oder Wiki-Sites eignet. Enthält Unterstützung für den Dunkelmodus.

Offen

Sitemap-Komponente - Finanzen, Bankwesen

Eine einfache, reaktionsschnelle Sitemap-Komponente für Finanz-/Banking-Schnittstellen mit einer Dark-Mode-Benutzeroberfläche mit Sepia-/Brauntönen. Optimiert für Desktops, Tablets und Mobilgeräte, mit vollständiger Unterstützung des Dunkelmodus.

Offen

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.

Offen