Navegación en la barra lateral

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>

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>

Componente de navegación de la barra lateral

Componente de navegación de barra lateral receptivo con soporte para modo oscuro. Diseño minimalista/plano, combinación de colores monocromática, interfaz compleja para carteras. Utiliza Tailwind CSS, picsum.photos y randomuser.me. Sin JavaScript.

Abrir vista previa

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

  <!-- Sidebar -->
  <div class="w-64 bg-white dark:bg-gray-800 shadow-lg">
    <div class="p-4">
      <h1 class="text-2xl font-bold text-gray-800 dark:text-white">My Portfolio</h1>
    </div>
    <nav class="mt-4">
      <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700">Home</a>
      <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700">About</a>
      <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700">Projects</a>
      <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700">Contact</a>
    </nav>

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

  <!-- Main Content (responsive - adjust margin-left on larger screens) -->
  <div class="flex-1 p-8">
    <h2 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">Welcome to my Portfolio</h2>

    <!-- Project Grid (Example) -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Project Card 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/project1/400/300" alt="Project Image">
        <div class="p-4">
          <h3 class="font-bold text-xl text-gray-800 dark:text-white mb-2">Project Title 1</h3>
          <p class="text-gray-700 dark:text-gray-300 text-base">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
      </div>

      <!-- Project Card 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/project2/400/300" alt="Project Image">
        <div class="p-4">
          <h3 class="font-bold text-xl text-gray-800 dark:text-white mb-2">Project Title 2</h3>
          <p class="text-gray-700 dark:text-gray-300 text-base">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
      </div>

      <!-- Project Card 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/project3/400/300" alt="Project Image">
        <div class="p-4">
          <h3 class="font-bold text-xl text-gray-800 dark:text-white mb-2">Project Title 3</h3>
          <p class="text-gray-700 dark:text-gray-300 text-base">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
      </div>

    </div>

  </div>

</div>

Componente de navegación de la barra lateral

Un componente de navegación de barra lateral receptivo diseñado en el estilo Brutalismo, perfecto para aplicaciones de comercio electrónico. Cuenta con colores vibrantes, alto contraste y múltiples elementos interactivos, incluidos enlaces a diferentes categorías de compras, opciones de cuentas de usuario y un vibrante botón de llamada a la acción para acceder al carrito de compras. El diseño también se adapta al modo oscuro.

Abrir vista previa

                <div class="flex flex-col w-64 h-screen p-4 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700">
    <h1 class="text-3xl font-bold text-vibrant-500 dark:text-vibrant-300">Shop Sidebar</h1>
    <ul class="mt-6 space-y-4">
        <li>  
            <a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
                <img src="https://picsum.photos/20/20" alt="Category Icon" class="mr-3">
                <span>Home</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
                <img src="https://picsum.photos/20/20" alt="Category Icon" class="mr-3">
                <span>Products</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
                <img src="https://picsum.photos/20/20" alt="Category Icon" class="mr-3">
                <span>Categories</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
                <img src="https://picsum.photos/20/20" alt="Category Icon" class="mr-3">
                <span>Deals</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
                <img src="https://picsum.photos/20/20" alt="Category Icon" class="mr-3">
                <span>Account</span>
            </a>
        </li>
    </ul>
    <div class="mt-6">
        <a href="#" class="flex items-center justify-center h-12 bg-vibrant-500 text-white font-bold rounded-lg shadow-lg hover:bg-vibrant-600 transition ease-in-out duration-150">
            <span>View Cart</span>
        </a>
    </div>
    <div class="mt-auto">
        <a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-8 h-8 mr-3">
            <span>Profile</span>
        </a>
    </div>
</div>

Categorías

Navegación en la barra lateral