Home
Amit Pachange
Tailwindflex navbar

Tailwindflex navbar

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

Navbar

Author Amit Pachange

14.4k

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