Componentes Componentes de navegación Navegación Skeuomórfica

Navegación Skeuomórfica

Un componente de navegación simple y receptivo con diseño Skeuomórfico, esquema de color análogo adecuado para aplicaciones de redes sociales, con soporte para temas oscuros.

Vista previa

Código HTML

<nav class="bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 shadow-lg">
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
    <div class="text-gray-800 dark:text-gray-200 font-bold text-xl">SocialApp</div>
    <div class="flex space-x-4">
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">
        <div class="p-2 rounded-md bg-gray-300 dark:bg-gray-600 shadow-md hover:shadow-lg">
          Home
        </div>
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">
        <div class="p-2 rounded-md bg-gray-300 dark:bg-gray-600 shadow-md hover:shadow-lg">
          Profile
        </div>
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">
        <div class="p-2 rounded-md bg-gray-300 dark:bg-gray-600 shadow-md hover:shadow-lg">
          Messages
        </div>
      </a>
    </div>
  </div>
</nav>

Componentes relacionados

Componente de componentes de navegación

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

Abrir

Componentes de navegación

Un componente de navegación responsivo con microinteracciones y soporte para temas oscuros, diseñado con Tailwind CSS.

Abrir

Componente de componentes de navegación

Un componente de navegación con un tema oscuro, diseño responsivo y sin JavaScript.

Abrir