Collection of free Tailwind CSS sidebar components from Codepen and other resources.

Links
Made with
- HTML / CSS
About a code
Responsive Sidebar TailwindCSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: bootstrap-icons.css
Tailwind version: 2.2.19

Links
Made with
- HTML / CSS / JS
About a code
Tailwind CSS Vertical Navigation Component
Tailwind navigation components act as the primary navigation of a webapp.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Tailwind version: 2.2.19

Links
Made with
- HTML / CSS / JS
About a code
Tailwind CSS Sidebar Layout Component
Tailwind box layout components are designed to give users a headstart with application layout.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Tailwind version: 2.2.19

Links
Made with
- HTML / CSS / JS
About a code
Responsive Sidebar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: alpine.js
Tailwind version: 2.0.3

Links
Made with
- HTML / CSS / JS
About a code
Curvy Sidebar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: alpine.js
Tailwind version: 2.0.3

Links
Made with
- HTML / CSS
About a code
Sidebar Navigation
Clean sidebar navigation.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Tailwind version: 2.0.2

Links
Made with
- HTML / CSS / JS
About a code
Responsive Two Columns Sidebar Layout
Responsive two columns sidebar layout with dark & light mode.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Tailwind version: 2.0.2

Links
Made with
- HTML / CSS / JS
About a code
One Columns Sidebar
One columns sidebar layout with dark & light mode.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: alpine-magic-helpers.js, alpine.js
Tailwind version: 2.0.2

Links
Made with
- HTML / CSS / JS
About a code
Mini Column Sidebar
Responsive mini column sidebar layout with dark & light mode.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: alpine-magic-helper.js, alpine.js
Tailwind version: 2.0.2

Links
Made with
- HTML / CSS
About a code
Sidebar Navigation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: boxicons.css
Tailwind version: 2.0.1

Links
Made with
- HTML / CSS
About a code
Sidebar
A simple sidebar.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Tailwind version: 2.0.1

Links
Made with
- HTML / CSS
About a code
App Admin Menus + Light/Dark Modes with Tailwind CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Tailwind version: 2.0.1

Links
Made with
- HTML / CSS / JS
About a code
With Inline Actions and Expandable Sidebar Filters
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Tailwind version: 2.0.0+

Links
Made with
- HTML / CSS
About a code
Sidebar #1
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Tailwind version: 2.0.0+

Links
Made with
- HTML / CSS
About a code
Sidebar #2
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Tailwind version: 2.0.0+

Links
Made with
- HTML / CSS
About a code
Sidebar #3
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Tailwind version: 2.0.0+

Links
Made with
- HTML / CSS
About a code
Sidebar with Search
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Tailwind version: 2.0.0+

Links
Made with
- HTML / CSS
About a code
Sidebar with Avatar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Tailwind version: 2.0.0+

Links
Made with
- HTML / CSS
About a code
Sidebar Purple
Elegant sidebar purple dor dashboard.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Tailwind version: 1.6.2

Links
Made with
- HTML / CSS
About a code
Sidebar for Dashboards
A simple sidebar for admin dashboards.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Tailwind version: 1.6.2

Links
Made with
- HTML / CSS
About a code
Navigation Side Bar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Tailwind version: 1.4.6

Links
Made with
- HTML / CSS / JS
About a code
Responsive Sidebar With Dropdown
Responsive sidebar with dropdown using AlpineJS and Heroicons.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Tailwind version: 1.2.0

Links
Made with
- HTML / CSS
About a code
KissTheme
Tailwind dashboard.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: fontawesome.css
Tailwind version: 0.3.0

Links
Made with
- HTML / CSS
About a code
Card Sidebar Navigation
A card sidebar navigation for Tailwind CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Tailwind version: 0.3.0