Sidebar Navigation Component
A responsive sidebar navigation component styled in a skeuomorphic way with dark theme support using Tailwind CSS.
HTML Code
<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>Related Components
Glassmorphism Sidebar Navigation Component
A Glassmorphism-styled sidebar navigation component for blogs, featuring a monochromatic color scheme. It's a simple, responsive design with dark mode support, using only HTML and Tailwind CSS. The sidebar includes a site title, navigation links, and a profile section.
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.
Sidebar Navigation Component - Memphis Muted
A complex, responsive sidebar navigation component inspired by Memphis design with a muted color scheme, suitable for documentation and wiki sites. Includes dark mode support and interactive elements.