Home
Oliver Hansen
Tailwind Sidebar Layout

Tailwind Sidebar Layout

This tailwind example is contributed by Oliver Hansen, on 12-Feb-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is drawer

Sidebar Navbar

Author Oliver Hansen

62.5k

Fork Fullscreen

<div class="hidden md:flex flex-col w-64 bg-gray-800">
        <div class="flex items-center justify-center h-16 bg-gray-900">
            <span class="text-white font-bold uppercase">Sidebar</span>
        </div>
        <div class="flex flex-col flex-1 overflow-y-auto">
            <nav class="flex-1 px-2 py-4 bg-gray-800">
                <a href="#" class="flex items-center px-4 py-2 text-gray-100 hover:bg-gray-700">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M4 6h16M4 12h16M4 18h16" />
                    </svg>
                    Dashboard
                </a>
                <a href="#" class="flex items-center px-4 py-2 mt-2 text-gray-100 hover:bg-gray-700">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M6 18L18 6M6 6l12 12" />
                    </svg>
                    Messages
                </a>
                <a href="#" class="flex items-center px-4 py-2 mt-2 text-gray-100 hover:bg-gray-700">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M13 10V3L4 14h7v7l9-11h-7z" />
                    </svg>
                    Settings
                </a>
            </nav>
        </div>
    </div>

<div class="flex flex-col flex-1 overflow-y-auto">
        <div class="flex items-center justify-between h-16 bg-white border-b border-gray-200">
            <div class="flex items-center px-4">
                <button class="text-gray-500 focus:outline-none focus:text-gray-700">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M4 6h16M4 12h16M4 18h16" />
                    </svg>
                </button>
                <input class="mx-4 w-full border rounded-md px-4 py-2" type="text" placeholder="Search">
            </div>
            <div class="flex items-center pr-4">

<button
                    class="flex items-center text-gray-500 hover:text-gray-700 focus:outline-none focus:text-gray-700">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M12 19l-7-7 7-7m5 14l7-7-7-7" />
                    </svg>
                </button>
            </div>
        </div>
        <div class="p-4">
            <h1 class="text-2xl font-bold">Welcome to my dashboard!</h1>
            <p class="mt-2 text-gray-600">This is an example dashboard using Tailwind CSS.</p>
        </div>
    </div>
    
</div>

Related Examples

Daystar Day care Dashboard
Daystar Day care Dashboard

Author:
Paul Livingstone Ssenoga

1 year ago

10.7k
Navbar
Navbar for primary menu

Author:
Anonymous

2 years ago

6.3k
Navigation Bar Responsive

Author:
SAI BENDE

2 years ago

10.5k
Simple Filters Navbar
idea for responsive navbar

Author:
Muneeb Ahmad

2 years ago

2.8k
navigation
tailwind navigation pills

Author:
Anonymous

2 years ago

9.3k
Navbar with search
Use this example of a navbar element to also show a search input element that you can integrate for a site-wide search.

Author:
Mamadou Diouma II Bah

2 years ago

16.4k
Animated Drawer
Collapsible sidebar navigation that allows users to access additional menu options. It is designed for efficient space utilization and can be easily expanded and collapsed.

Author:
Eamon Carter

2 years ago

28.3k
Navbar with social links
A header component with a logo, navigation links, and social media links.

Author:
Vikram Choudhary

2 years ago

7.4k
Tailwindflex navbar

Author:
Amit Pachange

2 years ago

17.1k
Navbar Section
Responsive Navbar

Author:
Noob

3 years ago

23.8k
Sticky sidebar menu for big screens

Author:
Prajwal Hallale

2 years ago

12.8k
Admin Panel
Source https://gist.github.com/visualval/8aaaad794256313fa2310b997e8a9b8f

Author:
Mr Robot

3 years ago

25.2k
Very simple navbar

Author:
Arya

3 years ago

14.5k
Sticky left sidebar

Author:
Lucas Martinez

3 years ago

15.7k
Responsive Navbar Example
A working example of the navbar

Author:
Noob

3 years ago

17.3k
Semi transparent navbar

Author:
Laurits

3 years ago

16.3k
Responsive navbar
navbar with the dropdown on mobile devices

Author:
Piet Vriend

3 years ago

38.9k
Minimalistic navbar
Responsive navbar

Author:
Sophia Baker

3 years ago

21.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components