Componente de navegación skeuomórfica
Un componente de navegación esqueuomórfico diseñado para imitar elementos del mundo real, como un panel de control físico o un panel de control. Cuenta con un diseño responsivo, efectos de desplazamiento que simulan pulsaciones de botones físicos y compatibilidad con temas oscuros. La navegación incluye sombras, degradados y texturas sutiles para crear una apariencia táctil en 3D que recuerda a las interfaces físicas.
Código HTML
<!-- Skeuomorphic Navigation Component with Dark Mode Support -->
<nav class="w-full bg-gradient-to-b from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 rounded-lg shadow-lg border border-gray-300 dark:border-gray-700 p-2 transition-all duration-300">
<!-- Container for the nav items -->
<div class="flex flex-col md:flex-row items-center justify-between">
<!-- Logo Area - Mimicking a metal plate with engraved logo -->
<div class="flex items-center p-2 bg-gradient-to-r from-gray-300 to-gray-200 dark:from-gray-700 dark:to-gray-800 rounded-lg shadow-inner border border-gray-400 dark:border-gray-600 m-2">
<div class="w-10 h-10 bg-gradient-to-br from-blue-400 to-blue-600 rounded-full flex items-center justify-center shadow-lg border-2 border-gray-300 dark:border-gray-700">
<span class="text-white font-bold text-xl">S</span>
</div>
<span class="ml-3 font-bold text-gray-700 dark:text-gray-200 tracking-wider text-shadow">SKEUOUI</span>
</div>
<!-- Navigation buttons - Mimicking physical buttons -->
<div class="flex flex-wrap justify-center md:justify-end">
<!-- Home Button -->
<div class="group m-2">
<button class="px-6 py-3 bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 rounded-lg text-gray-700 dark:text-gray-200 font-medium border border-gray-400 dark:border-gray-600 shadow-md hover:shadow-inner hover:translate-y-0.5 active:shadow-inner active:translate-y-1 transition-all duration-150 flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
</svg>
Home
</button>
<div class="h-1 w-full bg-blue-500 rounded-b opacity-0 group-hover:opacity-100 transition-opacity"></div>
</div>
<!-- Products Button -->
<div class="group m-2">
<button class="px-6 py-3 bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 rounded-lg text-gray-700 dark:text-gray-200 font-medium border border-gray-400 dark:border-gray-600 shadow-md hover:shadow-inner hover:translate-y-0.5 active:shadow-inner active:translate-y-1 transition-all duration-150 flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-green-500 dark:text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
</svg>
Products
</button>
<div class="h-1 w-full bg-green-500 rounded-b opacity-0 group-hover:opacity-100 transition-opacity"></div>
</div>
<!-- Services Button -->
<div class="group m-2">
<button class="px-6 py-3 bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 rounded-lg text-gray-700 dark:text-gray-200 font-medium border border-gray-400 dark:border-gray-600 shadow-md hover:shadow-inner hover:translate-y-0.5 active:shadow-inner active:translate-y-1 transition-all duration-150 flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-purple-500 dark:text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
</svg>
Services
</button>
<div class="h-1 w-full bg-purple-500 rounded-b opacity-0 group-hover:opacity-100 transition-opacity"></div>
</div>
</div>
<!-- User Profile - Mimicking an ID badge -->
<div class="m-2 flex items-center bg-gradient-to-r from-blue-100 to-blue-50 dark:from-blue-900 dark:to-blue-800 p-2 rounded-lg border border-blue-200 dark:border-blue-700 shadow">
<div class="relative">
<img src="https://randomuser.me/api/portraits/men/42.jpg" alt="User" class="w-10 h-10 rounded-full object-cover border-2 border-blue-300 dark:border-blue-600">
<div class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 border-2 border-white dark:border-gray-800 rounded-full"></div>
</div>
<div class="ml-2">
<div class="text-sm font-semibold text-gray-800 dark:text-gray-200">John Doe</div>
<div class="text-xs text-gray-600 dark:text-gray-400">Admin Panel</div>
</div>
</div>
</div>
<!-- Mobile Menu Toggle Button - Styled as a switch -->
<div class="md:hidden mt-2 flex justify-center">
<div class="relative w-16 h-8 bg-gray-300 dark:bg-gray-700 rounded-full shadow-inner border border-gray-400 dark:border-gray-600 flex items-center p-1 cursor-pointer">
<div class="absolute left-1 w-6 h-6 bg-gradient-to-br from-white to-gray-200 dark:from-gray-600 dark:to-gray-800 rounded-full shadow transform transition-transform border border-gray-300 dark:border-gray-500"></div>
<div class="w-full flex justify-between text-xs px-1 font-bold">
<span class="text-gray-700 dark:text-gray-300">|</span>
<span class="text-gray-700 dark:text-gray-300">|</span>
</div>
</div>
</div>
</nav>Componentes relacionados
Componente de navegación
Un componente de navegación de inspiración retro/vintage diseñado con Tailwind CSS, con efectos responsivos y compatibilidad con temas oscuros.
Componente de navegación
Un componente de navegación de modo oscuro receptivo diseñado para el comercio electrónico con una combinación de colores pastel y un diseño simple.
Componente de navegación de redes sociales
Un componente de navegación responsivo diseñado para interfaces de redes sociales, con una estética de Material Design que utiliza un tema oscuro con Tailwind CSS.