Sidebar Component
A responsive sidebar component designed with Glassmorphism effect and a complementary color scheme, suitable for a blog or content consumption.
HTML Code
<aside class="bg-white bg-opacity-30 backdrop-blur-lg shadow-md rounded-lg p-4 w-64 dark:bg-gray-800 dark:bg-opacity-30">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">User Name</h2>
</div>
<nav>
<ul class="space-y-2">
<li>
<a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Home</a>
</li>
<li>
<a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">About</a>
</li>
<li>
<a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Blog</a>
</li>
<li>
<a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Contact</a>
</li>
</ul>
</nav>
<div class="mt-4">
<h3 class="text-md font-semibold text-gray-800 dark:text-white">Featured Posts</h3>
<ul class="space-y-2">
<li>
<a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Post Title 1</a>
</li>
<li>
<a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Post Title 2</a>
</li>
<li>
<a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Post Title 3</a>
</li>
</ul>
</div>
<div class="mt-4">
<img src="https://picsum.photos/300/200" alt="Sample Image" class="rounded-lg shadow-md">
</div>
</aside>Related Components
Sidebar Component
A responsive dark mode sidebar component designed using Tailwind CSS, featuring dark backgrounds, hover effects, and placeholders for images and avatars.
Sidebar Component
A simple, responsive sidebar component with a brutalist design, monochromatic color scheme, and dark mode support.
Sidebar Component
A responsive sidebar component using Tailwind CSS, with Material Design principles and dark theme support. Includes a header with a logo and title, and a navigation menu with links.