Search Components

Sidebar Navigation

Navigation menu positioned on the side of the page

Sidebar Navigation Component

Responsive Sidebar Navigation Component with Dark Mode Support. Minimalist/Flat Design, Monochromatic color scheme, Complex interface for Portfolios. Uses Tailwind CSS, picsum.photos, and randomuser.me. No JavaScript.

Open Preview

                <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>

Sidebar Navigation Component

A responsive sidebar navigation component designed in the Brutalism style, perfect for e-commerce applications. It features vibrant colors, high contrast, and multiple interactive elements, including links to different shopping categories, user account options, and a vibrant call-to-action button for shopping cart access. The design adapts to dark mode as well.

Open Preview

                <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>

E-commerce Sidebar Navigation

A simple, responsive sidebar navigation component for e-commerce websites, featuring a triadic color scheme, microinteractions on hover, and dark mode support, built with Tailwind CSS.

Open Preview

                <div class="flex">
  <!-- Sidebar (Hidden on mobile, shown on desktop) -->
  <aside id="sidebar" class="bg-blue-500 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">
    <a href="#" class="text-white flex items-center space-x-2 px-4">
      <span class="text-2xl font-extrabold">E-Shop</span>
    </a>

    <nav>
      <a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 dark:hover:bg-blue-900">
        Home
      </a>
      <a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 dark:hover:bg-blue-900">
        Products
      </a>
      <a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 dark:hover:bg-blue-900">
        Categories
      </a>
      <a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 dark:hover:bg-blue-900">
        Cart
      </a>
      <a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 dark:hover:bg-blue-900">
        Account
      </a>
    </nav>
  </aside>

  <!-- Content area -->
  <div class="flex-1 p-10">
    <!-- A button to toggle the sidebar on mobile -->
    <button id="sidebar-toggle" class="text-blue-700 dark:text-blue-300 focus:outline-none md:hidden">
      <svg class="w-6 h-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>
    <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-8">Welcome to E-Shop</h1>
    <!-- Your main content goes here -->
    <p class="text-gray-700 dark:text-gray-300">This is the main content area. Add your product listings, categories, etc. here.</p>
  </div>
</div>

<!-- Add this script at the end of the body tag -->
<script>
  const sidebarToggle = document.getElementById('sidebar-toggle');
  const sidebar = document.getElementById('sidebar');

  sidebarToggle.addEventListener('click', () => {
    sidebar.classList.toggle('-translate-x-full');
  });
</script>

Brutalism Sidebar Navigation

A brutalist-style sidebar navigation component with earth tones, moderate complexity, responsiveness, and dark mode support, designed for blog/content sites using Tailwind CSS.

Open Preview

                <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">
    <div class="flex items-center justify-between">
      <h2 class="text-2xl font-bold text-stone-800 dark:text-stone-200">Navigation</h2>
      <!-- Mobile toggle (hidden on md and up) -->
      <button class="text-stone-800 dark:text-stone-200 md:hidden">
        <svg class="w-6 h-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 class="text-stone-700 dark:text-stone-300">
      <ul class="space-y-4">
        <li><a href="#" class="block hover:bg-stone-400 dark:hover:bg-stone-700 p-2 rounded transition duration-150 ease-in-out">Home</a></li>
        <li><a href="#" class="block hover:bg-stone-400 dark:hover:bg-stone-700 p-2 rounded transition duration-150 ease-in-out">Articles</a></li>
        <li><a href="#" class="block hover:bg-stone-400 dark:hover:bg-stone-700 p-2 rounded transition duration-150 ease-in-out">Categories</a></li>
        <li><a href="#" class="block hover:bg-stone-400 dark:hover:bg-stone-700 p-2 rounded transition duration-150 ease-in-out">About</a></li>
        <li><a href="#" class="block hover:bg-stone-400 dark:hover:bg-stone-700 p-2 rounded transition duration-150 ease-in-out">Contact</a></li>
      </ul>
    </nav>
  </div>
  
  <!-- Content area -->
  <div class="flex-1 p-10 overflow-y-auto">
    <h1 class="text-3xl font-bold text-stone-800 dark:text-stone-200 mb-6">Main Content Area</h1>
    <p class="text-stone-700 dark:text-stone-300">
      This is the main content area. The sidebar is on the left.
    </p>
    <!-- Example content -->
    <div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6">
      <div class="bg-stone-200 dark:bg-stone-700 p-6 rounded">
        <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-200 mb-4">Article Title 1</h3>
        <img src="https://picsum.photos/seed/article1/400/200" alt="Article image" class="w-full h-48 object-cover mb-4">
        <p class="text-stone-700 dark:text-stone-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
       <div class="bg-stone-200 dark:bg-stone-700 p-6 rounded">
        <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-200 mb-4">Article Title 2</h3>
         <img src="https://picsum.photos/seed/article2/400/200" alt="Article image" class="w-full h-48 object-cover mb-4">
        <p class="text-stone-700 dark:text-stone-300">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </div>
  </div>
</div>

Glassmorphism Sidebar Navigation

A complex, responsive Glassmorphism sidebar navigation for a dashboard with a complementary color scheme, dark mode support, and no JavaScript.

Open Preview

                <div class="flex h-screen bg-gray-200 dark:bg-gray-900">
    <!-- Sidebar -->
    <div class="flex flex-col w-64 bg-white dark:bg-gray-800 border-r border-gray-300 dark:border-gray-700 shadow-xl"
        style="backdrop-filter: blur(10px); background-color: rgba(255, 255, 255, 0.1);"
    >
        <div class="flex items-center justify-center h-16 border-b border-gray-300 dark:border-gray-700">
            <span class="text-2xl font-semibold text-gray-800 dark:text-white">Dashboard</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-700 dark:text-gray-200 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700"
            >
                <svg class="w-6 h-6 mr-3" 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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-2 2v5a1 1 0 01-1 1H9m2-13V9a1 1 0 011-1h2a1 1 0 011 1v3m-6 9l2-2m2 2l2-2"></path></svg>
                Home
            </a>
            <a
                href="#"
                class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700"
            >
                <svg class="w-6 h-6 mr-3" 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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                Analytics
            </a>
            <a
                href="#"
                class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700"
            >
                <svg class="w-6 h-6 mr-3" 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 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2m14 0V9a2 2 0 00-2-2H7a2 2 0 00-2 2v2m7 5h2m-2 0h-2"></path></svg>
                Reports
            </a>
            <a
                href="#"
                class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700"
            >

                <svg class="w-6 h-6 mr-3" 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.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                Settings
            </a>
        </nav>
        <div class="flex items-center justify-center h-16 border-t border-gray-300 dark:border-gray-700">
            <img
                class="w-10 h-10 rounded-full"
                src="https://randomuser.me/api/portraits/men/75.jpg"
                alt="Avatar"
            >
            <span class="ml-2 text-sm font-semibold text-gray-800 dark:text-white">John Doe</span>
        </div>
    </div>
    <!-- Content Area (can be added here) -->
</div>

Brutalism Sidebar Navigation

Responsive Sidebar Navigation Component with Brutalism design, Vibrant color scheme, and Simple layout for a Blog/Content purpose. Includes dark mode support.

Open Preview

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

  <!-- Sidebar -->
  <div class="w-64 px-4 py-6 bg-yellow-400 dark:bg-yellow-700 border-r-4 border-black dark:border-white">
    <h2 class="text-2xl font-bold text-black dark:text-white">Navigation</h2>
    <nav class="mt-8">
      <ul>
        <li class="mb-4">
          <a href="#" class="block text-black dark:text-white hover:underline text-xl">Home</a>
        </li>
        <li class="mb-4">
          <a href="#" class="block text-black dark:text-white hover:underline text-xl">Articles</a>
        </li>
        <li class="mb-4">
          <a href="#" class="block text-black dark:text-white hover:underline text-xl">About</a>
        </li>
        <li class="mb-4">
          <a href="#" class="block text-black dark:text-white hover:underline text-xl">Contact</a>
        </li>
      </ul>
    </nav>
  </div>

  <!-- Content Area (for demonstration) -->
  <div class="flex-1 p-10">
    <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-6">Main Content Area</h1>
    <p class="text-gray-700 dark:text-gray-300">
      This is where the main content of your blog or article would go.
      The sidebar provides navigation on the left.
    </p>
  </div>

</div>

RetroPastelSocialSidebar

A simple and responsive sidebar navigation component with retro/vintage 80s/90s design, pastel colors, and dark mode support, designed for social media interfaces using Tailwind CSS.

Open Preview

                <div class="flex h-screen bg-gradient-to-b from-pink-200 to-purple-200 dark:from-gray-800 dark:to-gray-900">
  <!-- Sidebar -->
  <div class="w-64 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 p-6 space-y-6 transition-transform transform -translate-x-full md:translate-x-0 md:relative fixed inset-y-0 left-0 z-50">
    <!-- Profile Section -->
    <div class="flex items-center space-x-4">
      <img class="h-12 w-12 rounded-full ring-2 ring-pink-400 dark:ring-purple-400" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
      <div>
        <h2 class="text-xl font-bold">Jane Doe</h2>
        <p class="text-sm text-gray-500 dark:text-gray-400">@janedoe</p>
      </div>
    </div>

    <nav class="space-y-2">
      <a href="#" class="group flex items-center space-x-2 p-2 rounded-md hover:bg-pink-300 dark:hover:bg-purple-600 transition duration-200">
        <svg class="h-5 w-5 text-pink-500 dark:text-purple-400 group-hover:text-white" 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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-2 2v5a1 1 0 01-1 1H9a1 1 0 01-1-1v-5m3-7v3"/></svg>
        <span class="font-medium">Home</span>
      </a>
      <a href="#" class="group flex items-center space-x-2 p-2 rounded-md hover:bg-pink-300 dark:hover:bg-purple-600 transition duration-200">
        <svg class="h-5 w-5 text-pink-500 dark:text-purple-400 group-hover:text-white" 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.932 8-11 8a9.913 9.913 0 01-3.365-.686A2 2 0 015 20.5V17m-7-3h2m-2 4h2m4-2h2m-2 4h2"/></svg>
        <span class="font-medium">Messages</span>
      </a>
      <a href="#" class="group flex items-center space-x-2 p-2 rounded-md hover:bg-pink-300 dark:hover:bg-purple-600 transition duration-200">
        <svg class="h-5 w-5 text-pink-500 dark:text-purple-400 group-hover:text-white" 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 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0a6 6 0 00-6 0m6 0v1a3 3 0 01-3 3H9a3 3 0 01-3-3v-1"/></svg>
        <span class="font-medium">Notifications</span>
      </a>
      <a href="#" class="group flex items-center space-x-2 p-2 rounded-md hover:bg-pink-300 dark:hover:bg-purple-600 transition duration-200">
        <svg class="h-5 w-5 text-pink-500 dark:text-purple-400 group-hover:text-white" 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"/></svg>
        <span class="font-medium">Profile</span>
      </a>
      <a href="#" class="group flex items-center space-x-2 p-2 rounded-md hover:bg-pink-300 dark:hover:bg-purple-600 transition duration-200">
        <svg class="h-5 w-5 text-pink-500 dark:text-purple-400 group-hover:text-white" 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.996.608 2.296.07 2.572-1.065z"/></svg>
        <span class="font-medium">Settings</span>
      </a>
    </nav>
  </div>

  <!-- Content Area -->
  <div class="flex-1 p-10">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-6">Main Content</h1>
    <!-- Your content goes here -->
    <p class="text-gray-700 dark:text-gray-300">This is where the main content of your page will be displayed.</p>
  </div>
</div>

RetroSidebarNavigation

A retro/vintage styled sidebar navigation component with responsive effects and dark theme support using Tailwind CSS.

Open Preview

                <div class="flex h-screen">
  <!-- Sidebar -->
  <div class="w-64 bg-gray-800 text-gray-100 retro-sidebar">
    <div class="p-4 text-2xl font-bold border-b border-gray-700 retro-title">Vaporwave Nav</div>
    <nav class="mt-4">
      <a href="#" class="block py-2 px-4 text-sm hover:bg-gray-700 transition duration-300 retro-nav-item">💿 Tracks</a>
      <a href="#" class="block py-2 px-4 text-sm hover:bg-gray-700 transition duration-300 retro-nav-item">📼 mixtapes</a>
      <a href="#" class="block py-2 px-4 text-sm hover:bg-gray-700 transition duration-300 retro-nav-item"> neon city</a>
      <a href="#" class="block py-2 px-4 text-sm hover:bg-gray-700 transition duration-300 retro-nav-item">💾💾💾 save game</a>
    </nav>
  </div>

  <!-- Page Content -->
  <div class="flex-1 p-10 text-2xl font-bold">
    <h1 class="retro-main-title">Welcome to the Grid</h1>
    <p class="mt-4 text-base retro-text">Explore the digital landscape...</p>
      <img src="https://picsum.photos/seed/retroscape/800/600" alt="Retro landscape" class="mt-8 rounded-lg shadow-lg">
  </div>
</div>

<style>
.retro-sidebar {
  background: linear-gradient(145deg, #4a0e4a, #1a051a);
  font-family: 'Press Start 2P', cursive;
}

.retro-title {
  color: #0ff;
  text-shadow: 0 0 5px #0ff, 0 0 10px #0ff, 0 0 15px #0ff, 0 0 20px #0ff;
}

.retro-nav-item {
  color: #0f0;
  text-shadow: 0 0 3px #0f0;
}

.retro-nav-item:hover {
  color: #ff0;
  text-shadow: 0 0 5px #ff0;
}

.retro-main-title {
    font-family: 'Press Start 2P', cursive;
    color: #f0f;
    text-shadow: 0 0 7px #f0f, 0 0 12px #f0f, 0 0 18px #f0f;
}

.retro-text {
    font-family: 'Press Start 2P', cursive;
    color: #0ff;
    text-shadow: 0 0 3px #0ff;
}

@media (max-width: 768px) {
  .retro-sidebar {
    width: 100%;
    height: auto;
  }
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  .retro-sidebar {
    background: linear-gradient(145deg, #1a051a, #4a0e4a);
  }
  .retro-title {
    color: #0f0;
    text-shadow: 0 0 5px #0f0, 0 0 10px #0f0, 0 0 15px #0f0, 0 0 20px #0f0;
  }
  .retro-nav-item {
    color: #0ff;
    text-shadow: 0 0 3px #0ff;
  }
  .retro-nav-item:hover {
    color: #f0f;
    text-shadow: 0 0 5px #f0f;
  }
  .retro-main-title {
      color: #0ff;
      text-shadow: 0 0 7px #0ff, 0 0 12px #0ff, 0 0 18px #0ff;
  }
  .retro-text {
      color: #f0f;
      text-shadow: 0 0 3px #f0f;
  }
}
</style>

Glassmorphism Sidebar Navigation

A responsive Sidebar Navigation Component with Glassmorphism design, dark mode support, and using Tailwind CSS. Features frosted glass-like translucent elements with blur effects.

Open Preview

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

    <!-- Backdrop -->
    <div id="sidebarBackdrop" class="fixed inset-0 z-10 bg-black opacity-0 md:hidden" onclick="closeSidebar()"></div>

    <!-- Sidebar -->
    <div id="sidebar" class="w-64 space-y-6 py-7 px-2 fixed inset-y-0 left-0 transform -translate-x-full md:translate-x-0 transition duration-200 ease-in-out z-20
                bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-10 backdrop-filter backdrop-blur-lg dark:text-white text-gray-900">

        <!-- Logo -->
        <a class="text-white flex items-center space-x-2 px-4" href="#">
            <svg class="w-8 h-8" 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.024 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.024 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.024 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.024 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.024 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.516.315 1.208.1 1.724-.51z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
            <span class="text-2xl font-extrabold">TailwindCSS</span>
        </a>

        <!-- Nav -->
        <nav>
            <a class="block py-2.5 px-4 rounded transition duration-200 hover:bg-white hover:bg-opacity-20 dark:hover:bg-gray-700 dark:hover:bg-opacity-20" href="#">Home</a>
            <a class="block py-2.5 px-4 rounded transition duration-200 hover:bg-white hover:bg-opacity-20 dark:hover:bg-gray-700 dark:hover:bg-opacity-20" href="#">About</a>
            <a class="block py-2.5 px-4 rounded transition duration-200 hover:bg-white hover:bg-opacity-20 dark:hover:bg-gray-700 dark:hover:bg-opacity-20" href="#">Services</a>
            <a class="block py-2.5 px-4 rounded transition duration-200 hover:bg-white hover:bg-opacity-20 dark:hover:bg-gray-700 dark:hover:bg-opacity-20" href="#">Contact</a>
        </nav>
    </div>

    <!-- Content -->
    <div class="flex-1 p-10 text-2xl font-bold">
        <button onclick="openSidebar()" class="md:hidden text-gray-500 dark:text-gray-400 focus:outline-none">
            <svg class="w-6 h-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>
        Content goes here...
    </div>

</div>

<style>
    /* For Glassmorphism effect in dark mode */
    .dark .backdrop-blur-lg {
        backdrop-filter: blur(16px);
    }

    /* For Glassmorphism effect in light mode */
    .backdrop-blur-lg {
        backdrop-filter: blur(16px);
    }
</style>

<script>
    function openSidebar() {
        document.getElementById('sidebar').classList.remove('-translate-x-full');
        document.getElementById('sidebarBackdrop').classList.remove('opacity-0');
        document.getElementById('sidebarBackdrop').classList.add('opacity-50');
    }

    function closeSidebar() {
        document.getElementById('sidebar').classList.add('-translate-x-full');
        document.getElementById('sidebarBackdrop').classList.remove('opacity-50');
        document.getElementById('sidebarBackdrop').classList.add('opacity-0');
    }
</script>
```

Sidebar Navigation Component

A responsive sidebar navigation component styled in a skeuomorphic way with dark theme support using Tailwind CSS.

Open Preview

                <div class="flex">
  <aside class="bg-gray-900 text-white w-64 h-screen shadow-lg rounded-r-3xl p-5">
    <div class="flex flex-col items-center mb-10">
      <img class="rounded-full border-4 border-gray-700" src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" width="100" height="100" />
      <h2 class="mt-3 text-xl font-bold">John Doe</h2>
      <p class="text-gray-400">Web Developer</p>
    </div>
    <nav>
      <ul class="space-y-4">
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition duration-200">
            <img class="h-6 w-6 mr-3" src="https://picsum.photos/20/20?random=1" alt="Icon" />
            Dashboard
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition duration-200">
            <img class="h-6 w-6 mr-3" src="https://picsum.photos/20/20?random=2" alt="Icon" />
            Profile
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition duration-200">
            <img class="h-6 w-6 mr-3" src="https://picsum.photos/20/20?random=3" alt="Icon" />
            Settings
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition duration-200">
            <img class="h-6 w-6 mr-3" src="https://picsum.photos/20/20?random=4" alt="Icon" />
            Help
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition duration-200">
            <img class="h-6 w-6 mr-3" src="https://picsum.photos/20/20?random=5" alt="Icon" />
            Logout
          </a>
        </li>
      </ul>
    </nav>
  </aside>
  <main class="flex-1 p-10 bg-gray-200">
    <h1 class="text-3xl font-bold">Main Content Area</h1>
    <p>This is where your main content goes.</p>
  </main>
</div>