Componentes Componentes de navegación Componente de navegación skeuomórfica

Componente de navegación skeuomórfica

Un componente de navegación diseñado con estilo skeuomórfico, con una combinación de colores complementaria, adecuada para un tablero con visualización de datos y paneles de control. Incluye elementos interactivos para la participación del usuario.

Vista previa

Código HTML

<nav class="bg-gray-800 dark:bg-gray-900 shadow-lg rounded-lg p-4 flex flex-col md:flex-row justify-between items-center">
    <div class="flex items-center">
        <img src="https://picsum.photos/50/50" alt="Logo" class="w-12 h-12 rounded-full mr-3 shadow-lg">
        <h1 class="text-2xl font-bold text-white">Dashboard</h1>
    </div>
    <div class="mt-4 md:mt-0">
        <ul class="flex space-x-4">
            <li>
                <a href="#" class="text-white hover:text-blue-400 dark:hover:text-blue-300 px-3 py-2 rounded-md text-sm font-medium">Home</a>
            </li>
            <li>
                <a href="#" class="text-gray-300 hover:text-blue-400 dark:hover:text-blue-300 px-3 py-2 rounded-md text-sm font-medium">Profile</a>
            </li>
            <li>
                <a href="#" class="text-gray-300 hover:text-blue-400 dark:hover:text-blue-300 px-3 py-2 rounded-md text-sm font-medium">Settings</a>
            </li>
            <li>
                <a href="#" class="text-gray-300 hover:text-blue-400 dark:hover:text-blue-300 px-3 py-2 rounded-md text-sm font-medium">Logout</a>
            </li>
        </ul>
    </div>
</nav>

<section class="p-6 bg-white dark:bg-gray-800 rounded-lg">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Dashboard Overview</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="bg-gray-100 dark:bg-gray-700 shadow-lg rounded-lg p-5">
            <h3 class="text-md font-medium text-gray-800 dark:text-gray-200">Data Card 1</h3>
            <img src="https://picsum.photos/200/150" alt="Data visualization" class="rounded-lg mt-2">
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 shadow-lg rounded-lg p-5">
            <h3 class="text-md font-medium text-gray-800 dark:text-gray-200">Data Card 2</h3>
            <img src="https://picsum.photos/200/150" alt="Data visualization" class="rounded-lg mt-2">
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 shadow-lg rounded-lg p-5">
            <h3 class="text-md font-medium text-gray-800 dark:text-gray-200">Data Card 3</h3>
            <img src="https://picsum.photos/200/150" alt="Data visualization" class="rounded-lg mt-2">
        </div>
    </div>
</section>

Componentes relacionados

Componentes de navegación

Una barra de navegación de modo oscuro con diseño responsivo, con un logotipo, un avatar y enlaces para la navegación.

Abrir

Navegación por neumorfismo

Un componente de navegación responsivo simple con estilo Neumorphism para el comercio electrónico.

Abrir

Componente de componentes de navegación

Glassmorphism Monocromático Moderado Componente de navegación de comercio electrónico con soporte de modo oscuro

Abrir