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

Demo image: Responsive Sidebar TailwindCSS

Author

  • abdanzamzam

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

Demo image: Tailwind CSS Vertical Navigation Component

Author

  • Harrishash

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

Demo image: Tailwind CSS Sidebar Layout Component

Author

  • Harrishash

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

Demo image: Responsive Sidebar

Author

  • Kamona-WD

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

Demo image: Curvy Sidebar

Author

  • Kamona-WD

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

Demo image: Sidebar Navigation

Author

  • iaminos

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

Demo image: Responsive Two Columns Sidebar Layout

Author

  • Kamona-WD

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

Demo image: Responsive Mini + One Columns Sidebar

Author

  • Kamona-WD

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

Demo image: Mini Column Sidebar

Author

  • Kamona-WD

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

Demo image: Sidebar Navigation

Author

  • iaminos

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

Demo image: Sidebar

Author

  • jamesbhatta

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

Demo image: App Admin Menus + Light/Dark Modes with Tailwind CSS

Author

  • Rob Stinson

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

Demo image: With Inline Actions and Expandable Sidebar Filters

Author

  • TailwindUI

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+

Demo image: Sidebar #1

Author

  • Mamba UI

Made with

  • HTML / CSS

About a code

Sidebar #1

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Sidebar #2

Author

  • Mamba UI

Made with

  • HTML / CSS

About a code

Sidebar #2

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Sidebar #3

Author

  • Mamba UI

Made with

  • HTML / CSS

About a code

Sidebar #3

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Sidebar with Search

Author

  • MerakiUI

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+

Demo image: Sidebar with Avatar

Author

  • MerakiUI

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+

Demo image: Sidebar Purple

Author

  • MateoM147

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

Demo image: Sidebar for Dashboards

Author

  • MateoM147

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

Demo image: Navigation Side Bar

Author

  • Mohamed-Kaizen

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

Demo image: Responsive Sidebar With Dropdown

Author

  • Cricksu

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

Demo image: KissTheme

Author

  • folivaresrios

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

Demo image: Card Sidebar Navigation

Author

  • vmitchell85

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