Componentes de búsqueda

Categorías

Componentes Navegación en la barra lateral

Navegación en la barra lateral

Menú de navegación situado en el lateral de la página

RetroSidebarNavigation

Un componente de navegación de barra lateral retro/vintage retro/vintage receptivo, sencillo, para sitios web empresariales/corporativos, con soporte para modo oscuro.

Abrir Vista previa

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900">
  <!-- Sidebar -->
  <div class="w-64 bg-pink-200 dark:bg-purple-800 shadow-md p-4 flex flex-col justify-between">
    <div>
      <div class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-6 font-mono">ByteCorp</div>
      <nav>
        <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-pink-300 dark:hover:bg-purple-700 rounded-md transition duration-300 ease-in-out font-semibold text-lg">
          Dashboard
        </a>
        <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-pink-300 dark:hover:bg-purple-700 rounded-md transition duration-300 ease-in-out font-semibold text-lg mt-2">
          Analytics
        </a>
        <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-pink-300 dark:hover:bg-purple-700 rounded-md transition duration-300 ease-in-out font-semibold text-lg mt-2">
          Reports
        </a>
        <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-pink-300 dark:hover:bg-purple-700 rounded-md transition duration-300 ease-in-out font-semibold text-lg mt-2">
          Settings
        </a>
      </nav>
    </div>
    <div class="flex items-center">
      <img src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
      <div class="text-gray-800 dark:text-gray-100 font-semibold">John Doe</div>
    </div>
  </div>

  <!-- Content Area (for demonstration purposes) -->
  <div class="flex-1 p-8">
    <h1 class="text-4xl font-bold text-gray-800 dark:text-gray-100 mb-6 font-mono">Welcome to ByteCorp Dashboard</h1>
    <p class="text-gray-700 dark:text-gray-300 text-lg">This is a simple content area. The sidebar is on the left.</p>
  </div>
</div>

Componente de navegación de la barra lateral de Glassmorphism

Un componente de navegación de la barra lateral para blogs con estilo Glassmorphism, con un esquema de color monocromático. Es un diseño simple y responsivo con soporte para modo oscuro, usando solo HTML y Tailwind CSS. La barra lateral incluye un título del sitio, enlaces de navegación y una sección de perfil.

Abrir Vista previa

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col md:flex-row">

  <!-- Sidebar -->
  <div class="w-full md:w-64 bg-white dark:bg-gray-800 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg p-5 shadow-lg md:min-h-screen">
    <div class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-6">MyBlog</div>
    <nav>
      <a href="#" class="block py-2 px-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-blue-600 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white transition duration-300 ease-in-out">
        Home
      </a>
      <a href="#" class="block py-2 px-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-blue-600 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white transition duration-300 ease-in-out mt-2">
        Articles
      </a>
      <a href="#" class="block py-2 px-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-blue-600 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white transition duration-300 ease-in-out mt-2">
        Categories
      </a>
      <a href="#" class="block py-2 px-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-blue-600 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white transition duration-300 ease-in-out mt-2">
        About
      </a>
      <a href="#" class="block py-2 px-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-blue-600 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white transition duration-300 ease-in-out mt-2">
        Contact
      </a>
    </nav>

    <div class="mt-8 pt-8 border-t border-gray-300 dark:border-gray-700">
      <div class="flex items-center">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-blue-400">
        <div class="ml-3">
          <p class="text-gray-800 dark:text-gray-200 font-medium">John Doe</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">Blogger</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Main Content (Placeholder for blog content) -->
  <div class="flex-1 p-8">
    <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-6">Welcome to MyBlog!</h1>
    <p class="text-gray-700 dark:text-gray-300 leading-relaxed">
      This is a placeholder for your blog content. The sidebar on the left demonstrates a Glassmorphism-style navigation.
      It's responsive, adapts to dark mode, and uses a monochromatic color scheme for a clean and modern look.
      Explore the navigation links to imagine various sections of your blog.
    </p>
    
    <div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="bg-white dark:bg-gray-800 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg p-6 rounded-lg shadow-lg">
            <img src="https://picsum.photos/seed/blog1/400/250" alt="Blog Post 1" class="rounded-lg mb-4">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">My First Awesome Post</h2>
            <p class="text-gray-700 dark:text-gray-300 text-sm">A short description of the first amazing blog post. Click to read more!</p>
        </div>
        <div class="bg-white dark:bg-gray-800 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg p-6 rounded-lg shadow-lg">
            <img src="https://picsum.photos/seed/blog2/400/250" alt="Blog Post 2" class="rounded-lg mb-4">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">Another Great Article</h2>
            <p class="text-gray-700 dark:text-gray-300 text-sm">Discover more insights in this compelling second article.</p>
        </div>
    </div>
  </div>

</div>

Componente de navegación de la barra lateral

Una barra de navegación lateral simple y receptiva para aplicaciones de redes sociales, optimizada para el modo oscuro con un esquema de color análogo. Incluye una sección de perfil con un avatar y un nombre de usuario, y enlaces de navegación. El diseño utiliza Tailwind CSS para el estilo y la capacidad de respuesta, con soporte para el modo oscuro a través del prefijo dark: incorporado de Tailwind.

Abrir Vista previa

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900">

  <!-- Sidebar for Social Media -->
  <div class="flex flex-col w-64 bg-gray-800 dark:bg-gray-950 text-white shadow-lg">
    <div class="flex items-center justify-center h-20 shadow-md">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="h-10 w-10 rounded-full border-2 border-purple-400 dark:border-purple-600">
      <span class="ml-2 text-lg font-semibold text-purple-300 dark:text-purple-500">SocialNet</span>
    </div>
    <nav class="flex-1 px-2 py-4 space-y-2">
      <a href="#" class="flex items-center px-4 py-2 text-gray-300 dark:text-gray-400 hover:bg-gray-700 dark:hover:bg-gray-800 rounded-lg group transition duration-200">
        <svg class="h-5 w-5 mr-3 text-purple-400 dark:text-purple-600 group-hover:text-purple-300 dark:group-hover:text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m7 0V3m0 8V3"></path></svg>
        Home
      </a>
      <a href="#" class="flex items-center px-4 py-2 text-gray-300 dark:text-gray-400 hover:bg-gray-700 dark:hover:bg-gray-800 rounded-lg group transition duration-200">
        <svg class="h-5 w-5 mr-3 text-purple-400 dark:text-purple-600 group-hover:text-purple-300 dark:group-hover:text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2m2 0h11m-9.991-10H2a2 2 0 01-2-2V7H2a2 2 0 012-2h4a2 2 0 012 2v3a2 2 0 01-2 2-2 2 0 01-3 0zm4.5 0"></path></svg>
        Profile
      </a>
      <a href="#" class="flex items-center px-4 py-2 text-gray-300 dark:text-gray-400 hover:bg-gray-700 dark:hover:bg-gray-800 rounded-lg group transition duration-200">
        <svg class="h-5 w-5 mr-3 text-purple-400 dark:text-purple-600 group-hover:text-purple-300 dark:group-hover:text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
        Messages
      </a>
      <a href="#" class="flex items-center px-4 py-2 text-gray-300 dark:text-gray-400 hover:bg-gray-700 dark:hover:bg-gray-800 rounded-lg group transition duration-200">
        <svg class="h-5 w-5 mr-3 text-purple-400 dark:text-purple-600 group-hover:text-purple-300 dark:group-hover:text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17c0 .538-.256.958-.553 1.196C14.152 18.068 13.57 18 13 18c-.482 0-.962-.06-1.428-.182a3 3 0 01-2.434-1.298M15 17a2 2 0 00-2-2H9.688m1.325.75c.983-.39 1.688-.718 1.688-1.554 0-.845-.582-1.39-1.5-1.39-.915 0-1.5.545-1.5 1.39 0 1.2.668 1.57 1.5 1.57M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
        Notifications
      </a>
      <a href="#" class="flex items-center px-4 py-2 text-gray-300 dark:text-gray-400 hover:bg-gray-700 dark:hover:bg-gray-800 rounded-lg group transition duration-200">
        <svg class="h-5 w-5 mr-3 text-purple-400 dark:text-purple-600 group-hover:text-purple-300 dark:group-hover:text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37a1.724 1.724 0 002.572-1.065z"></path></svg>
        Settings
      </a>
    </nav>
    <div class="mt-auto px-4 py-4 border-t border-gray-700 dark:border-gray-800">
      <a href="#" class="flex items-center px-4 py-2 text-gray-300 dark:text-gray-400 hover:bg-gray-700 dark:hover:bg-gray-800 rounded-lg group transition duration-200">
        <svg class="h-5 w-5 mr-3 text-purple-400 dark:text-purple-600 group-hover:text-purple-300 dark:group-hover:text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
        Logout
      </a>
    </div>
  </div>

  <!-- Main Content Area (Optional, for context) -->
  <div class="flex-1 flex flex-col">
    <header class="h-20 flex items-center px-6 shadow-md bg-white dark:bg-gray-800">
      <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Dashboard</h1>
    </header>
    <main class="flex-1 p-6 overflow-y-auto bg-gray-100 dark:bg-gray-900">
      <div class="border-4 border-dashed border-gray-300 dark:border-gray-700 rounded-lg h-full p-4 text-gray-700 dark:text-gray-300 text-center flex items-center justify-center">
        Main content goes here. This is a placeholder for your social media feed or other content.
      </div>
    </main>
  </div>

</div>

Navegación en la barra lateral

Componente de navegación de barra lateral receptivo con esquema de color analógico y microinteracciones, incluido el soporte de tema oscuro.

Abrir Vista previa

                <div class="flex h-screen bg-gray-100 dark:bg-gray-800">

    <!-- Sidebar -->
    <div class="w-64 bg-teal-500 dark:bg-teal-700 text-white flex flex-col">
        <div class="p-4 text-center text-2xl font-bold">Dashboard</div>
        <nav class="mt-6">
            <a href="#" class="block py-2 px-4 text-teal-100 hover:bg-teal-600 dark:hover:bg-teal-800 transition duration-300 ease-in-out">Home</a>
            <a href="#" class="block py-2 px-4 text-teal-100 hover:bg-teal-600 dark:hover:bg-teal-800 transition duration-300 ease-in-out">Analytics</a>
            <a href="#" class="block py-2 px-4 text-teal-100 hover:bg-teal-600 dark:hover:bg-teal-800 transition duration-300 ease-in-out">Reports</a>
            <a href="#" class="block py-2 px-4 text-teal-100 hover:bg-teal-600 dark:hover:bg-teal-800 transition duration-300 ease-in-out">Settings</a>
        </nav>
    </div>

    <!-- Content area -->
    <div class="flex-1 p-10 text-gray-800 dark:text-gray-200">
        <h1 class="text-3xl font-bold mb-6">Welcome to the Dashboard</h1>
        <p>This is the main content area.</p>
    </div>

</div>

Componente de navegación de la barra lateral

Un componente de navegación de barra lateral simple y receptivo diseñado para tableros, con animaciones atractivas y una combinación de colores terrosos. Es compatible con el modo oscuro.

Abrir Vista previa

                <div class="flex flex-col h-screen bg-gray-200 dark:bg-gray-800 border-r border-gray-300 dark:border-gray-700 shadow-lg transition-transform duration-300 ease-in-out">
    <div class="flex items-center justify-center h-16 border-b border-gray-300 dark:border-gray-700 bg-green-600 dark:bg-green-800">
        <h1 class="text-xl text-white font-bold">Dashboard</h1>
    </div>
    <nav class="flex-1 p-4">
        <ul class="space-y-2">
            <li>
                <a href="#" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-green-500 dark:hover:bg-green-700 rounded transition-all duration-300 ease-in-out">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                    <span>Profile</span>
                </a>
            </li>
            <li>
                <a href="#" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-green-500 dark:hover:bg-green-700 rounded transition-all duration-300 ease-in-out">
                    <img src="https://picsum.photos/seed/pic1/30/30" alt="Image 1" class="w-8 h-8 rounded-full mr-2">
                    <span>Reports</span>
                </a>
            </li>
            <li>
                <a href="#" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-green-500 dark:hover:bg-green-700 rounded transition-all duration-300 ease-in-out">
                    <img src="https://picsum.photos/seed/pic2/30/30" alt="Image 2" class="w-8 h-8 rounded-full mr-2">
                    <span>Settings</span>
                </a>
            </li>
        </ul>
    </nav>
    <div class="p-4 border-t border-gray-300 dark:border-gray-700">
        <a href="#" class="block text-center text-gray-700 dark:text-gray-300 hover:bg-green-500 dark:hover:bg-green-700 rounded p-2 transition-all duration-300 ease-in-out">Logout</a>
    </div>
</div>

Componente de navegación de la barra lateral de redes sociales

Componente de navegación de barra lateral de redes sociales receptivo con soporte de tema oscuro que usa brutalismo, tonos de tierra y principios de diseño complejos. No se necesita JavaScript.

Abrir Vista previa

                <div class="flex h-screen bg-stone-100 dark:bg-stone-900">

  <!-- Sidebar -->
  <div class="w-64 bg-stone-300 dark:bg-stone-800 p-6 space-y-6 transform -translate-x-full md:translate-x-0 transition-transform duration-200 ease-in-out" id="sidebar">
    
    <!-- Profile Section -->
    <div class="flex items-center space-x-4">
      <img class="w-12 h-12 rounded-full border-4 border-stone-900 dark:border-stone-100" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
      <div>
        <h2 class="text-xl font-bold text-stone-900 dark:text-stone-100">Username</h2>
        <p class="text-sm text-stone-700 dark:text-stone-300">@userhandle</p>
      </div>
    </div>

    <hr class="border-stone-900 dark:border-stone-100">

    <!-- Navigation -->
    <nav class="space-y-4">
      <a href="#" class="block text-stone-900 dark:text-stone-100 text-lg font-semibold hover:underline focus:underline">Feed</a>
      <a href="#" class="block text-stone-900 dark:text-stone-100 text-lg font-semibold hover:underline focus:underline">Profile</a>
      <a href="#" class="block text-stone-900 dark:text-stone-100 text-lg font-semibold hover:underline focus:underline">Messages</a>
      <a href="#" class="block text-stone-900 dark:text-stone-100 text-lg font-semibold hover:underline focus:underline">Notifications</a>
      <a href="#" class="block text-stone-900 dark:text-stone-100 text-lg font-semibold hover:underline focus:underline">Settings</a>
    </nav>

    <hr class="border-stone-900 dark:border-stone-100">

    <!-- Footer Links -->
    <div class="flex flex-wrap gap-2 text-sm text-stone-700 dark:text-stone-300">
      <a href="#" class="hover:underline focus:underline">About</a>
      <a href="#" class="hover:underline focus:underline">Help</a>
      <a href="#" class="hover:underline focus:underline">Terms</a>
      <a href="#" class="hover:underline focus:underline">Privacy</a>
    </div>

  </div>

  <!-- Content Area - Example -->
  <div class="flex-1 p-6">
    <h1 class="text-2xl font-bold text-stone-900 dark:text-stone-100">Main Content Area</h1>
    </div>

</div>

Componente de navegación de la barra lateral

Un componente de navegación de la barra lateral adaptado para blogs, diseñado con elementos 3D y colores vibrantes. Admite el modo oscuro y es responsivo, con un diseño simple adecuado para el consumo de contenido.

Abrir Vista previa

                <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 h-screen sticky top-0">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Navigation</h2>
    <ul class="space-y-4">
        <li>
            <a href="#" class="flex items-center p-2 rounded-lg hover:bg-blue-500 hover:text-white transition ease-in-out duration-150"> 
                <img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full border border-gray-300 dark:border-gray-700">
                <span class="ml-2 font-medium text-gray-700 dark:text-gray-300">Home</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-2 rounded-lg hover:bg-blue-500 hover:text-white transition ease-in-out duration-150"> 
                <img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full border border-gray-300 dark:border-gray-700">
                <span class="ml-2 font-medium text-gray-700 dark:text-gray-300">About</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-2 rounded-lg hover:bg-blue-500 hover:text-white transition ease-in-out duration-150"> 
                <img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full border border-gray-300 dark:border-gray-700">
                <span class="ml-2 font-medium text-gray-700 dark:text-gray-300">Blog</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-2 rounded-lg hover:bg-blue-500 hover:text-white transition ease-in-out duration-150"> 
                <img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full border border-gray-300 dark:border-gray-700">
                <span class="ml-2 font-medium text-gray-700 dark:text-gray-300">Contact</span>
            </a>
        </li>
    </ul>
</div>

Componente de navegación de la barra lateral

Un componente de navegación de barra lateral receptivo con elementos de diseño 3D, un esquema de color análogo y complejidad media con funciones interactivas. Adecuado para blogs o sitios web de contenido.

Abrir Vista previa

                <!-- Responsive Sidebar Navigation Component -->
<div class="flex h-screen bg-gray-100 dark:bg-gray-900">

    <!-- Sidebar -->
    <div class="bg-gradient-to-br from-blue-500 to-purple-600 dark:from-blue-700 dark:to-purple-900 text-white w-64 space-y-6 py-7 px-2 absolute inset-y-0 left-0 transform -translate-x-full md:relative md:translate-x-0 transition duration-200 ease-in-out shadow-lg">
        <div class="text-white flex items-center justify-between px-4">
            <span class="text-2xl font-extrabold italic">Blog Menu</span>
            <!-- Mobile menu button -->
            <button class="text-white focus:outline-none md:hidden" onclick="document.querySelector('.translate-x-full').classList.toggle('translate-x-full');">
                <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                </svg>
            </button>
        </div>

        <!-- Nav Links -->
        <nav>
            <a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 dark:hover:bg-blue-900 hover:text-white transform hover:scale-105 shadow-md mb-2">
                <i class="fas fa-home mr-3"></i> Home
            </a>
            <a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-purple-700 dark:hover:bg-purple-900 hover:text-white transform hover:scale-105 shadow-md mb-2">
                <i class="fas fa-th-large mr-3"></i> Categories
            </a>
            <a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 dark:hover:bg-blue-900 hover:text-white transform hover:scale-105 shadow-md mb-2">
                <i class="fas fa-bookmark mr-3"></i> Bookmarks
            </a>
            <a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-purple-700 dark:hover:bg-purple-900 hover:text-white transform hover:scale-105 shadow-md mb-2">
                <i class="fas fa-user mr-3"></i> Profile
            </a>
            <a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 dark:hover:bg-blue-900 hover:text-white transform hover:scale-105 shadow-md">
                <i class="fas fa-cog mr-3"></i> Settings
            </a>
        </nav>

        <!-- Footer/User Info (Optional) -->
        <div class="absolute inset-x-0 bottom-0 p-4">
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full border-2 border-white mr-3">
                <div class="text-sm">
                    <p class="font-semibold">John Doe</p>
                    <p class="text-gray-200 dark:text-gray-400">View Profile</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content Area -->
    <div class="flex-1 p-10 text-2xl font-bold">
        <!-- Your main content goes here -->
        Main Content
    </div>
    
</div>

Glassmorphism Sidebar Navigation

Un componente de navegación de barra lateral receptiva al estilo de Glassmorphism para carteras, con soporte para modo oscuro y combinación de colores análoga. Cuenta con efectos de vidrio esmerilado y múltiples elementos interactivos que usan solo HTML y Tailwind CSS.

Abrir Vista previa

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900">

  <!-- Backdrop -->
  <div id="sidebarBackdrop" class="fixed inset-0 z-40 lg:hidden transition-opacity duration-300 ease-linear opacity-0 pointer-events-none bg-black bg-opacity-25"></div>

  <!-- Sidebar -->
  <div id="sidebar" class="fixed inset-y-0 left-0 z-50 w-64 bg-white/20 dark:bg-gray-800/20 backdrop-filter backdrop-blur-lg border-r border-white/30 dark:border-gray-700/30 transform -translate-x-full lg:translate-x-0 lg:static lg:inset-0 transition-transform duration-300 ease-in-out">

    <div class="flex items-center justify-center h-20 border-b border-white/30 dark:border-gray-700/30">
      <h1 class="text-2xl font-bold text-gray-800 dark:text-white">Portfolio</h1>
    </div>

    <nav class="flex-1 px-2 py-4 space-y-2">
      <a href="#" class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-white/30 dark:hover:bg-gray-700/30 rounded-lg">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mr-3" 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 2m0 0l7 7M19 10v10a1 1 0 01-1 1h-3m-2-7a2 2 0 11-4 0 2 2 0 014 0z" />
        </svg>
        Home
      </a>

      <a href="#" class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-white/30 dark:hover:bg-gray-700/30 rounded-lg">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
        </svg>
        About
      </a>

      <a href="#" class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-white/30 dark:hover:bg-gray-700/30 rounded-lg">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
        </svg>
        Projects
      </a>

      <a href="#" class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-white/30 dark:hover:bg-gray-700/30 rounded-lg">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
        </svg>
        Contact
      </a>
    </nav>

    <div class="absolute bottom-0 left-0 w-full p-4 border-t border-white/30 dark:border-gray-700/30">
      <div class="flex items-center">
        <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
        <div class="text-sm">
          <p class="font-semibold text-gray-800 dark:text-white">John Doe</p>
          <p class="text-gray-600 dark:text-gray-400">Web Developer</p>
        </div>
      </div>
    </div>

  </div>

  <!-- Content Area (for demonstration) -->
  <div class="flex-1 p-10">
    <h1 class="text-3xl font-bold text-gray-800 dark:text-white">Main Content</h1>
    <p class="mt-4 text-gray-600 dark:text-gray-400">This is the main content area. The sidebar is on the left.</p>
  </div>

</div>

Componente de navegación de la barra lateral: escala de grises

Componente de navegación de la barra lateral responsiva

Abrir Vista previa

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900">
    <!-- Sidebar -->
    <div class="flex flex-col w-64 bg-white dark:bg-gray-800 shadow-lg">
        <div class="flex items-center justify-center h-16 shadow-md">
            <span class="text-xl font-semibold text-gray-700 dark:text-white">Company Name</span>
        </div>
        <div class="flex flex-col flex-1 overflow-y-auto">
            <nav class="flex-1 px-2 py-4 bg-gray-200 dark:bg-gray-700">
                <a href="#" class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600 rounded">
                    <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
                    Dashboard
                </a>
                <a href="#" class="flex items-center px-4 py-2 mt-2 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600 rounded">
                    <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
                    Projects
                </a>
                <a href="#" class="flex items-center px-4 py-2 mt-2 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600 rounded">
                    <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
                    Team
                </a>
                <a href="#" class="flex items-center px-4 py-2 mt-2 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600 rounded">
                    <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.23-.14.447-.297.66-.48z"></path></svg>
                    Settings
                </a>
            </nav>
        </div>
    </div>
    <!-- Main content (placeholder) -->
    <div class="flex flex-col flex-1 overflow-y-auto">
        <div class="h-16 bg-white dark:bg-gray-800 shadow-md"></div>
        <div class="p-4">
            <!-- Your main content goes here -->
        </div>
    </div>
</div>