Componentes Mapa del sitio Componente de mapa del sitio

Componente de mapa del sitio

Un componente de mapa del sitio responsivo diseñado en modo oscuro con Tailwind CSS.

Vista previa

Código HTML

<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>

Componentes relacionados

Retro_Healthcare_Sitemap_Component

Un componente de mapa del sitio simple y receptivo con una estética retro / vintage, combinación de colores análoga, adecuada para aplicaciones de atención médica, incluida la compatibilidad con el modo oscuro.

Abrir

Componente de mapa del sitio

Un componente de mapa del sitio simple y receptivo con un diseño inspirado en papel/impresión y un esquema de color análogo, adecuado para sitios web industriales/de fabricación, incluida la compatibilidad con el modo oscuro.

Abrir

Componente de mapa del sitio Glassmorphism

Un componente de mapa del sitio responsivo con un diseño de cristal, combinación de colores análoga y compatibilidad con modo oscuro, adecuado para sitios web comerciales y corporativos.

Abrir