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
Sidebar Navigation
Responsive sidebar navigation component with analogus color scheme and microinteractions, including dark theme support.
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.
Sidebar Navigation Component - Agriculture/Farming
A complex, minimalist sidebar navigation component designed for agriculture/farming websites. Features jewel-tone colors, full responsiveness, dark mode support, and multiple interactive elements suitable for dashboards and management systems in farming contexts.