Tailwindflex navbar

This tailwind example is contributed by Amit Pachange, on 15-Jul-2023. Component is made with Tailwind v3.4. It is responsive.

Navbar

Author Amit Pachange

Tailwind v3.4 17.4k 7

Fork Fullscreen

<div class="flex p-2 justify-between items-center border-b border-gray-300 flex-wrap">
    <div class="flex items-center">
        <img src="https://tailwindflex.com/public/images/logo.svg" class="w-10 h-10">
        <h2 class="font-bold text-2xl text-purple-600">TailwildFlex</h2>
    </div>
    <div class="relative flex items-center hidden md:inline-flex">
        <input type="text" placeholder="Search" class="border border-gray-200 rounded-md py-1 px-2"/>
        <svg class="absolute right-2 h-6 w-6 text-gray-400 hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none"
            viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
        </svg>
    </div>
    <div class="flex items-center gap-2">
        <button class="border px-2 py-1 rounded-md">Center</button>
        <button class="border px-2 py-1 rounded-md">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-400 hover:text-gray-500 text-gray-700" fill="none"
            viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
        </svg>
        </button>
        <button class="border px-2 py-1 rounded-md text-gray-500">Tailwind V3</button>
        <button class="border px-2 py-1 rounded-md bg-purple-600 text-white hover:bg-purple-700">Save</button>
    </div>
</div>

Related Examples

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.

Mamadou Diouma II Bah

2 years ago

17k
Responsive navbar with dark mode support
Sidebar on small screen devices

TailwindFlex

4 years ago

20.5k
Responsive navbar
navbar with the dropdown on mobile devices

Piet Vriend

3 years ago

39.8k
Tailwind Sidebar Layout

Oliver Hansen

3 years ago

63.5k
Fixed navbar

Oliver Hansen

3 years ago

28.5k
Navbar Section
Responsive Navbar

Noob

4 years ago

24.4k
Semi transparent navbar

Laurits

3 years ago

16.7k
Minimalistic navbar
Responsive navbar

Sophia Baker

3 years ago

21.7k
Navbar compoent

Amit Pachange

3 years ago

17.3k
Simple navbar
semi transparent

Laurits

3 years ago

14.9k
Very simple navbar

Arya

3 years ago

15k
navigation
tailwind navigation pills

Anonymous

2 years ago

9.6k