Componentes Mapa del sitio Componente de mapa del sitio

Componente de mapa del sitio

Un componente de mapa del sitio receptivo diseñado para el modo oscuro con colores pastel, adecuado para tableros.

Vista previa

Código HTML

<div class="bg-gray-800 text-gray-200 dark:bg-gray-900 dark:text-gray-300 p-6 rounded-lg shadow-lg max-w-4xl mx-auto">
    <h2 class="text-2xl font-bold mb-4">Site Map</h2>
    <p class="mb-4">Overview of the main sections:</p>
    <ul class="space-y-2">
        <li class="bg-gray-700 dark:bg-gray-800 rounded p-4 shadow hover:bg-gray-600 dark:hover:bg-gray-700 transition duration-300">
            <a href="#" class="flex items-center">
                <img src="https://picsum.photos/30" alt="Icon" class="rounded-full mr-3">
                <span>Dashboard</span>
            </a>
        </li>
        <li class="bg-gray-700 dark:bg-gray-800 rounded p-4 shadow hover:bg-gray-600 dark:hover:bg-gray-700 transition duration-300">
            <a href="#" class="flex items-center">
                <img src="https://picsum.photos/30" alt="Icon" class="rounded-full mr-3">
                <span>User Management</span>
            </a>
        </li>
        <li class="bg-gray-700 dark:bg-gray-800 rounded p-4 shadow hover:bg-gray-600 dark:hover:bg-gray-700 transition duration-300">
            <a href="#" class="flex items-center">
                <img src="https://picsum.photos/30" alt="Icon" class="rounded-full mr-3">
                <span>Reports</span>
            </a>
        </li>
        <li class="bg-gray-700 dark:bg-gray-800 rounded p-4 shadow hover:bg-gray-600 dark:hover:bg-gray-700 transition duration-300">
            <a href="#" class="flex items-center">
                <img src="https://picsum.photos/30" alt="Icon" class="rounded-full mr-3">
                <span>Settings</span>
            </a>
        </li>
    </ul>
    <div class="mt-6">
        <p class="font-bold">User Profile</p>
        <div class="flex items-center bg-gray-700 dark:bg-gray-800 rounded p-4 mt-2">
            <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="rounded-full mr-3">
            <span>John Doe</span>
        </div>
    </div>
</div>

Componentes relacionados

Componente de mapa del sitio

Un componente de mapa del sitio simple y vibrante inspirado en 3D para carteras, con diseño responsivo y compatibilidad con el modo oscuro mediante Tailwind CSS.

Abrir

Componente de mapa del sitio

Un componente de mapa del sitio neumórfico con diseño responsivo y compatibilidad con el modo oscuro.

Abrir

Componente de mapa del sitio

Un componente de mapa del sitio receptivo con microinteracciones, combinación de colores pastel y soporte para temas oscuros, adecuado para sitios web de comercio electrónico. Incluye un encabezado, una barra de búsqueda y varias categorías con enlaces.

Abrir