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.
HTML Code
<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>Related Components
Glassmorphism Sidebar Navigation
A Glassmorphism-styled responsive sidebar navigation component for portfolios, with dark mode support and analogous color scheme. Features frosted glass effects and multiple interactive elements using only HTML and Tailwind CSS.
Sidebar Navigation Component
A simple, responsive sidebar navigation for social media applications, optimized for dark mode with an analogous color scheme. It includes a profile section with an avatar and username, and navigation links. The design uses Tailwind CSS for styling and responsiveness, featuring dark mode support via Tailwind's built-in dark: prefix.
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.