- Home
-
sidebar
sidebar
This tailwind example is contributed by Abhishek Kumar, on 28-Aug-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are drawer,Admin Dashboard, User dashboard
Author Abhishek Kumar
Related Examples
-
Sidebar
This is the sidebar that I use in my projects, I use grid to be able to manage the space issue a little better, it seems like a clean and modern design, it is more than anything for the dashboards that you want to create
9 months ago3.3k -
sidebar
This sidebar implementation includes: 1. Responsive design that works on both desktop and mobile 2. Indigo-800 and Blue-900 color scheme for the background 3. Dark mode support 4. Beautiful animations and effects: 1. Slide-in animation when opening the sidebar 2. Fade-in animation for menu items with staggered delays 3. Hover effects on menu items with underline animation 4. Smooth color transitions 5. SVG icons for menu items 6. User profile section at the bottom of the sidebar 7. Close button for easy dismissal on mobile 8. Main content area with a toggle button for the sidebar 9. Accessibility considerations (proper heading structure, color contrast, focus styles) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The sidebar has a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - Menu items have hover effects with background color changes and underline animations - Icons change color on hover - The sidebar slides in from the left with a smooth animation - Menu items fade in with a staggered delay for a smooth entrance - Dark mode is automatically applied based on system preferences - The layout is responsive, with the sidebar hiding off-screen on mobile and a toggle button to show/hide it This implementation provides a visually appealing and functional sidebar with various animations and effects, using HTML, Tailwind CSS, and vanilla JavaScript for the interactions.
10 months ago3.7k -
6 months ago3.6k
-
1 week ago32
-
1 week ago120
-
Responsive navbar with dark mode support
Sidebar on small screen devices
1 year ago2k -
Acode Master - FB & WhatsApp UI Combo
Description (meta description) ni tag ikoreshwa mu mutwe (head) wa HTML igaragaza mu ncamake icyo urubuga cyangwa urupapuro rwawe ruvuga. Iyi description ikoreshwa cyane na search engines (nka Google) mu kwerekana summary y’urubuga mu bisubizo by’ubushakashatsi.
3 months ago265 -
gallary
html , css
3 months ago504 -
Material 3 Drawer [Light]
A sidebar drawer that conforms to Google's Material 3 design guidelines
3 months ago226 -
Elegant NavBar + Drawer
A NavBar, a responsive drawer/sidebar, and other useful Tailwind components to get started creating an app. Pure CSS, no JavaScript needed (although this example uses a bit of JS).
4 months ago854 -
Admin Panel
Source https://gist.github.com/visualval/8aaaad794256313fa2310b997e8a9b8f
3 years ago23.6k -
MEDICAL profecial #esther developer
medical care
3 months ago255
Explore components by Tags
Didn't find component you were looking for?
Search from 2400+ components