Componentes Navegación Componente de navegación retro vintage

Componente de navegación retro vintage

Un componente de navegación responsivo diseñado con una estética retro/vintage inspirada en los estilos de los años 80/90, con una combinación de colores pastel. Adecuado para interfaces de redes sociales, incluida la compatibilidad con el modo oscuro.

Vista previa

Código HTML

<nav class="bg-pink-100 dark:bg-gray-800 p-4 rounded-lg shadow-lg">
    <div class="flex items-center justify-between">
        <div class="text-xl font-bold text-gray-800 dark:text-white">
            RetroSocial
        </div>
        <div class="hidden md:flex space-x-4">
            <a href="#" class="text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Home</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Profile</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Messages</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Settings</a>
        </div>
        <button class="md:hidden bg-pink-600 text-white p-2 rounded-lg hover:bg-pink-500 transition duration-200">
            Menu
        </button>
    </div>
    <div class="mt-2 md:hidden">
        <a href="#" class="block text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Home</a>
        <a href="#" class="block text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Profile</a>
        <a href="#" class="block text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Messages</a>
        <a href="#" class="block text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Settings</a>
    </div>
</nav>
<div class="bg-pink-50 dark:bg-gray-900 p-6 mt-4 rounded-lg">
    <h2 class="text-2xl text-gray-800 dark:text-white font-bold">Welcome to RetroSocial</h2>
    <p class="text-gray-600 dark:text-gray-300 mt-2">
        Connect with friends, share memories, and explore the past with our vintage-inspired social media platform.
    </p>
    <div class="mt-4 flex space-x-4">
        <img src="https://picsum.photos/50/50" alt="Random user avatar" class="rounded-full border-2 border-pink-500">
        <img src="https://picsum.photos/50/50" alt="Random user avatar" class="rounded-full border-2 border-pink-500">
        <img src="https://picsum.photos/50/50" alt="Random user avatar" class="rounded-full border-2 border-pink-500">
    </div>
</div>

Componentes relacionados

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.

Abrir

Barra de navegación de comercio electrónico

Neumorfismo Barra de navegación de comercio electrónico con tonos tierra

Abrir

Navegación monoespacial en redes sociales

Un componente de navegación complejo y receptivo para aplicaciones de redes sociales, con una estética monoespaciada/de desarrollador con colores apagados y compatibilidad con el modo oscuro. Incluye perfil de usuario, búsqueda, notificaciones y enlaces de navegación principales.

Abrir