CCHub Logo CCHub Tailwind Collection
Komponenten Sitemap Sitemap-Komponente

Sitemap-Komponente

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

Vorschau

HTML-Code 

<div class="bg-gray-900 text-white p-5 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold mb-4">Site Map</h2>
    <ul class="space-y-3">
        <li class="hover:text-gray-400 transition duration-300">
            <a href="#" class="flex items-center space-x-2">
                <img src="https://picsum.photos/30/30" alt="Random Placeholder" class="rounded-full" />
                <span>Home</span>
            </a>
        </li>
        <li class="hover:text-gray-400 transition duration-300">
            <a href="#" class="flex items-center space-x-2">
                <img src="https://picsum.photos/30/30" alt="Random Placeholder" class="rounded-full" />
                <span>About Us</span>
            </a>
        </li>
        <li class="hover:text-gray-400 transition duration-300">
            <a href="#" class="flex items-center space-x-2">
                <img src="https://picsum.photos/30/30" alt="Random Placeholder" class="rounded-full" />
                <span>Services</span>
            </a>
        </li>
        <li class="hover:text-gray-400 transition duration-300">
            <a href="#" class="flex items-center space-x-2">
                <img src="https://picsum.photos/30/30" alt="Random Placeholder" class="rounded-full" />
                <span>Contact</span>
            </a>
        </li>
        <li class="hover:text-gray-400 transition duration-300">
            <a href="#" class="flex items-center space-x-2">
                <img src="https://picsum.photos/30/30" alt="Random Placeholder" class="rounded-full" />
                <span>Privacy Policy</span>
            </a>
        </li>
    </ul>
    <div class="mt-5">
        <h3 class="text-xl font-semibold">Follow Us</h3>
        <ul class="flex space-x-4 mt-2">
            <li><img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-8 h-8" /></li>
            <li><img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="rounded-full w-8 h-8" /></li>
            <li><img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="rounded-full w-8 h-8" /></li>
        </ul>
    </div>
</div>

Verwandte Komponenten

Neumorphic_Real_Estate_Sitemap_Component

Eine einfache, reaktionsschnelle neumorphe Sitemap-Komponente für Immobilienplattformen mit einem Regenbogen-Farbschema mit Farbverlauf und Unterstützung für den Dunkelmodus.

Offen

Sitemap-Komponente

Eine Sitemap-Komponente, die nach Material Design-Prinzipien unter Verwendung von Tailwind CSS entwickelt wurde und reaktionsschnelle Layouts, Animationen und Unterstützung für dunkle Designs bietet.

Offen

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