This the upper navigation of your website. You can add in it links, icons, links with icons, search bars and a brand text. The dynamic part of them is made using Vue and the styles are done using Tailwind CSS.
Text
The following example features a brand on the left and some text links on the right.
<nav class= "relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-blueGray-500 mb-3" >
<div class= "container px-4 mx-auto flex flex-wrap items-center justify-between" >
<div class= "w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start" >
<a class= "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href= "#pablo" >
blueGray Color
</a>
<button class= "cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type= "button" >
<span class= "block relative w-6 h-px rounded-sm bg-white" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
</button>
</div>
<div class= "lg:flex flex-grow items-center" >
<ul class= "flex flex-col lg:flex-row list-none ml-auto" >
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
Discover
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
Profile
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
Setting
</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class= "relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-red-500 mb-3" >
<div class= "container px-4 mx-auto flex flex-wrap items-center justify-between" >
<div class= "w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start" >
<a class= "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href= "#pablo" >
red Color
</a>
<button class= "cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type= "button" >
<span class= "block relative w-6 h-px rounded-sm bg-white" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
</button>
</div>
<div class= "lg:flex flex-grow items-center" >
<ul class= "flex flex-col lg:flex-row list-none ml-auto" >
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
Discover
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
Profile
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
Setting
</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class= "relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-orange-500 mb-3" >
<div class= "container px-4 mx-auto flex flex-wrap items-center justify-between" >
<div class= "w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start" >
<a class= "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href= "#pablo" >
orange Color
</a>
<button class= "cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type= "button" >
<span class= "block relative w-6 h-px rounded-sm bg-white" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
</button>
</div>
<div class= "lg:flex flex-grow items-center" >
<ul class= "flex flex-col lg:flex-row list-none ml-auto" >
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
Discover
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
Profile
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
Setting
</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class= "relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-amber-500 mb-3" >
<div class= "container px-4 mx-auto flex flex-wrap items-center justify-between" >
<div class= "w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start" >
<a class= "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href= "#pablo" >
amber Color
</a>
<button class= "cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type= "button" >
<span class= "block relative w-6 h-px rounded-sm bg-white" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
</button>
</div>
<div class= "lg:flex flex-grow items-center" >
<ul class= "flex flex-col lg:flex-row list-none ml-auto" >
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
Discover
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
Profile
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
Setting
</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class= "relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-emerald-500 mb-3" >
<div class= "container px-4 mx-auto flex flex-wrap items-center justify-between" >
<div class= "w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start" >
<a class= "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href= "#pablo" >
emerald Color
</a>
<button class= "cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type= "button" >
<span class= "block relative w-6 h-px rounded-sm bg-white" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
</button>
</div>
<div class= "lg:flex flex-grow items-center" >
<ul class= "flex flex-col lg:flex-row list-none ml-auto" >
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
Discover
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
Profile
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
Setting
</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class= "relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-teal-500 mb-3" >
<div class= "container px-4 mx-auto flex flex-wrap items-center justify-between" >
<div class= "w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start" >
<a class= "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href= "#pablo" >
teal Color
</a>
<button class= "cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type= "button" >
<span class= "block relative w-6 h-px rounded-sm bg-white" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
</button>
</div>
<div class= "lg:flex flex-grow items-center" >
<ul class= "flex flex-col lg:flex-row list-none ml-auto" >
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
Discover
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
Profile
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
Setting
</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class= "relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-lightBlue-500 mb-3" >
<div class= "container px-4 mx-auto flex flex-wrap items-center justify-between" >
<div class= "w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start" >
<a class= "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href= "#pablo" >
lightBlue Color
</a>
<button class= "cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type= "button" >
<span class= "block relative w-6 h-px rounded-sm bg-white" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
</button>
</div>
<div class= "lg:flex flex-grow items-center" >
<ul class= "flex flex-col lg:flex-row list-none ml-auto" >
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
Discover
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
Profile
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
Setting
</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class= "relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-indigo-500 mb-3" >
<div class= "container px-4 mx-auto flex flex-wrap items-center justify-between" >
<div class= "w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start" >
<a class= "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href= "#pablo" >
indigo Color
</a>
<button class= "cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type= "button" >
<span class= "block relative w-6 h-px rounded-sm bg-white" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
</button>
</div>
<div class= "lg:flex flex-grow items-center" >
<ul class= "flex flex-col lg:flex-row list-none ml-auto" >
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
Discover
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
Profile
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
Setting
</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class= "relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-purple-500 mb-3" >
<div class= "container px-4 mx-auto flex flex-wrap items-center justify-between" >
<div class= "w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start" >
<a class= "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href= "#pablo" >
purple Color
</a>
<button class= "cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type= "button" >
<span class= "block relative w-6 h-px rounded-sm bg-white" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
</button>
</div>
<div class= "lg:flex flex-grow items-center" >
<ul class= "flex flex-col lg:flex-row list-none ml-auto" >
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
Discover
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
Profile
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
Setting
</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class= "relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-pink-500 mb-3" >
<div class= "container px-4 mx-auto flex flex-wrap items-center justify-between" >
<div class= "w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start" >
<a class= "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href= "#pablo" >
pink Color
</a>
<button class= "cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type= "button" >
<span class= "block relative w-6 h-px rounded-sm bg-white" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
</button>
</div>
<div class= "lg:flex flex-grow items-center" >
<ul class= "flex flex-col lg:flex-row list-none ml-auto" >
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
Discover
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
Profile
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
Setting
</a>
</li>
</ul>
</div>
</div>
</nav>
Icons
You can leave the text, and only give your users some intuitive icon links.
<nav class= "relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-blueGray-500 mb-3" >
<div class= "container px-4 mx-auto flex flex-wrap items-center justify-between" >
<div class= "w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start" >
<a class= "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href= "#pablo" >
blueGray Color
</a>
<button class= "cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type= "button" >
<span class= "block relative w-6 h-px rounded-sm bg-white" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
</button>
</div>
<div class= "lg:flex flex-grow items-center" >
<ul class= "flex flex-col lg:flex-row list-none ml-auto" >
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-facebook-square text-lg leading-lg text-white opacity-75" ></i>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-twitter text-lg leading-lg text-white opacity-75" ></i>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-instagram text-lg leading-lg text-white opacity-75" ></i>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-github text-lg leading-lg text-white opacity-75" ></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class= "relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-red-500 mb-3" >
<div class= "container px-4 mx-auto flex flex-wrap items-center justify-between" >
<div class= "w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start" >
<a class= "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href= "#pablo" >
red Color
</a>
<button class= "cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type= "button" >
<span class= "block relative w-6 h-px rounded-sm bg-white" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
</button>
</div>
<div class= "lg:flex flex-grow items-center" >
<ul class= "flex flex-col lg:flex-row list-none ml-auto" >
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-facebook-square text-lg leading-lg text-white opacity-75" ></i>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-twitter text-lg leading-lg text-white opacity-75" ></i>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-instagram text-lg leading-lg text-white opacity-75" ></i>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-github text-lg leading-lg text-white opacity-75" ></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class= "relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-orange-500 mb-3" >
<div class= "container px-4 mx-auto flex flex-wrap items-center justify-between" >
<div class= "w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start" >
<a class= "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href= "#pablo" >
orange Color
</a>
<button class= "cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type= "button" >
<span class= "block relative w-6 h-px rounded-sm bg-white" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
</button>
</div>
<div class= "lg:flex flex-grow items-center" >
<ul class= "flex flex-col lg:flex-row list-none ml-auto" >
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-facebook-square text-lg leading-lg text-white opacity-75" ></i>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-twitter text-lg leading-lg text-white opacity-75" ></i>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-instagram text-lg leading-lg text-white opacity-75" ></i>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-github text-lg leading-lg text-white opacity-75" ></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class= "relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-amber-500 mb-3" >
<div class= "container px-4 mx-auto flex flex-wrap items-center justify-between" >
<div class= "w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start" >
<a class= "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href= "#pablo" >
amber Color
</a>
<button class= "cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type= "button" >
<span class= "block relative w-6 h-px rounded-sm bg-white" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
</button>
</div>
<div class= "lg:flex flex-grow items-center" >
<ul class= "flex flex-col lg:flex-row list-none ml-auto" >
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-facebook-square text-lg leading-lg text-white opacity-75" ></i>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-twitter text-lg leading-lg text-white opacity-75" ></i>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-instagram text-lg leading-lg text-white opacity-75" ></i>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-github text-lg leading-lg text-white opacity-75" ></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class= "relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-emerald-500 mb-3" >
<div class= "container px-4 mx-auto flex flex-wrap items-center justify-between" >
<div class= "w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start" >
<a class= "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href= "#pablo" >
emerald Color
</a>
<button class= "cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type= "button" >
<span class= "block relative w-6 h-px rounded-sm bg-white" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
</button>
</div>
<div class= "lg:flex flex-grow items-center" >
<ul class= "flex flex-col lg:flex-row list-none ml-auto" >
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-facebook-square text-lg leading-lg text-white opacity-75" ></i>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-twitter text-lg leading-lg text-white opacity-75" ></i>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-instagram text-lg leading-lg text-white opacity-75" ></i>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-github text-lg leading-lg text-white opacity-75" ></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class= "relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-teal-500 mb-3" >
<div class= "container px-4 mx-auto flex flex-wrap items-center justify-between" >
<div class= "w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start" >
<a class= "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href= "#pablo" >
teal Color
</a>
<button class= "cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type= "button" >
<span class= "block relative w-6 h-px rounded-sm bg-white" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
</button>
</div>
<div class= "lg:flex flex-grow items-center" >
<ul class= "flex flex-col lg:flex-row list-none ml-auto" >
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-facebook-square text-lg leading-lg text-white opacity-75" ></i>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-twitter text-lg leading-lg text-white opacity-75" ></i>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-instagram text-lg leading-lg text-white opacity-75" ></i>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-github text-lg leading-lg text-white opacity-75" ></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class= "relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-lightBlue-500 mb-3" >
<div class= "container px-4 mx-auto flex flex-wrap items-center justify-between" >
<div class= "w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start" >
<a class= "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href= "#pablo" >
lightBlue Color
</a>
<button class= "cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type= "button" >
<span class= "block relative w-6 h-px rounded-sm bg-white" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
</button>
</div>
<div class= "lg:flex flex-grow items-center" >
<ul class= "flex flex-col lg:flex-row list-none ml-auto" >
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-facebook-square text-lg leading-lg text-white opacity-75" ></i>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-twitter text-lg leading-lg text-white opacity-75" ></i>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-instagram text-lg leading-lg text-white opacity-75" ></i>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-github text-lg leading-lg text-white opacity-75" ></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class= "relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-indigo-500 mb-3" >
<div class= "container px-4 mx-auto flex flex-wrap items-center justify-between" >
<div class= "w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start" >
<a class= "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href= "#pablo" >
indigo Color
</a>
<button class= "cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type= "button" >
<span class= "block relative w-6 h-px rounded-sm bg-white" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
</button>
</div>
<div class= "lg:flex flex-grow items-center" >
<ul class= "flex flex-col lg:flex-row list-none ml-auto" >
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-facebook-square text-lg leading-lg text-white opacity-75" ></i>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-twitter text-lg leading-lg text-white opacity-75" ></i>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-instagram text-lg leading-lg text-white opacity-75" ></i>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-github text-lg leading-lg text-white opacity-75" ></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class= "relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-purple-500 mb-3" >
<div class= "container px-4 mx-auto flex flex-wrap items-center justify-between" >
<div class= "w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start" >
<a class= "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href= "#pablo" >
purple Color
</a>
<button class= "cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type= "button" >
<span class= "block relative w-6 h-px rounded-sm bg-white" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
</button>
</div>
<div class= "lg:flex flex-grow items-center" >
<ul class= "flex flex-col lg:flex-row list-none ml-auto" >
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-facebook-square text-lg leading-lg text-white opacity-75" ></i>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-twitter text-lg leading-lg text-white opacity-75" ></i>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-instagram text-lg leading-lg text-white opacity-75" ></i>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-github text-lg leading-lg text-white opacity-75" ></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class= "relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-pink-500 mb-3" >
<div class= "container px-4 mx-auto flex flex-wrap items-center justify-between" >
<div class= "w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start" >
<a class= "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href= "#pablo" >
pink Color
</a>
<button class= "cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type= "button" >
<span class= "block relative w-6 h-px rounded-sm bg-white" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
</button>
</div>
<div class= "lg:flex flex-grow items-center" >
<ul class= "flex flex-col lg:flex-row list-none ml-auto" >
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-facebook-square text-lg leading-lg text-white opacity-75" ></i>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-twitter text-lg leading-lg text-white opacity-75" ></i>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-instagram text-lg leading-lg text-white opacity-75" ></i>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-github text-lg leading-lg text-white opacity-75" ></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
Icons and Text
The following example features a brand on the left and some text and icon links on the right.
<nav class= "relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-blueGray-500 mb-3" >
<div class= "container px-4 mx-auto flex flex-wrap items-center justify-between" >
<div class= "w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start" >
<a class= "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href= "#pablo" >
blueGray Color
</a>
<button class= "cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type= "button" >
<span class= "block relative w-6 h-px rounded-sm bg-white" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
</button>
</div>
<div class= "lg:flex flex-grow items-center" >
<ul class= "flex flex-col lg:flex-row list-none ml-auto" >
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-facebook-square text-lg leading-lg text-white opacity-75" ></i><span class= "ml-2" > Share</span>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-twitter text-lg leading-lg text-white opacity-75" ></i><span class= "ml-2" > Tweet</span>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-pinterest text-lg leading-lg text-white opacity-75" ></i><span class= "ml-2" > Pin</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class= "relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-red-500 mb-3" >
<div class= "container px-4 mx-auto flex flex-wrap items-center justify-between" >
<div class= "w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start" >
<a class= "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href= "#pablo" >
red Color
</a>
<button class= "cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type= "button" >
<span class= "block relative w-6 h-px rounded-sm bg-white" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
</button>
</div>
<div class= "lg:flex flex-grow items-center" >
<ul class= "flex flex-col lg:flex-row list-none ml-auto" >
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-facebook-square text-lg leading-lg text-white opacity-75" ></i><span class= "ml-2" > Share</span>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-twitter text-lg leading-lg text-white opacity-75" ></i><span class= "ml-2" > Tweet</span>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-pinterest text-lg leading-lg text-white opacity-75" ></i><span class= "ml-2" > Pin</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class= "relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-orange-500 mb-3" >
<div class= "container px-4 mx-auto flex flex-wrap items-center justify-between" >
<div class= "w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start" >
<a class= "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href= "#pablo" >
orange Color
</a>
<button class= "cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type= "button" >
<span class= "block relative w-6 h-px rounded-sm bg-white" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
</button>
</div>
<div class= "lg:flex flex-grow items-center" >
<ul class= "flex flex-col lg:flex-row list-none ml-auto" >
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-facebook-square text-lg leading-lg text-white opacity-75" ></i><span class= "ml-2" > Share</span>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-twitter text-lg leading-lg text-white opacity-75" ></i><span class= "ml-2" > Tweet</span>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-pinterest text-lg leading-lg text-white opacity-75" ></i><span class= "ml-2" > Pin</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class= "relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-amber-500 mb-3" >
<div class= "container px-4 mx-auto flex flex-wrap items-center justify-between" >
<div class= "w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start" >
<a class= "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href= "#pablo" >
amber Color
</a>
<button class= "cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type= "button" >
<span class= "block relative w-6 h-px rounded-sm bg-white" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
</button>
</div>
<div class= "lg:flex flex-grow items-center" >
<ul class= "flex flex-col lg:flex-row list-none ml-auto" >
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-facebook-square text-lg leading-lg text-white opacity-75" ></i><span class= "ml-2" > Share</span>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-twitter text-lg leading-lg text-white opacity-75" ></i><span class= "ml-2" > Tweet</span>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-pinterest text-lg leading-lg text-white opacity-75" ></i><span class= "ml-2" > Pin</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class= "relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-emerald-500 mb-3" >
<div class= "container px-4 mx-auto flex flex-wrap items-center justify-between" >
<div class= "w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start" >
<a class= "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href= "#pablo" >
emerald Color
</a>
<button class= "cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type= "button" >
<span class= "block relative w-6 h-px rounded-sm bg-white" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
</button>
</div>
<div class= "lg:flex flex-grow items-center" >
<ul class= "flex flex-col lg:flex-row list-none ml-auto" >
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-facebook-square text-lg leading-lg text-white opacity-75" ></i><span class= "ml-2" > Share</span>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-twitter text-lg leading-lg text-white opacity-75" ></i><span class= "ml-2" > Tweet</span>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-pinterest text-lg leading-lg text-white opacity-75" ></i><span class= "ml-2" > Pin</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class= "relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-teal-500 mb-3" >
<div class= "container px-4 mx-auto flex flex-wrap items-center justify-between" >
<div class= "w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start" >
<a class= "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href= "#pablo" >
teal Color
</a>
<button class= "cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type= "button" >
<span class= "block relative w-6 h-px rounded-sm bg-white" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
</button>
</div>
<div class= "lg:flex flex-grow items-center" >
<ul class= "flex flex-col lg:flex-row list-none ml-auto" >
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-facebook-square text-lg leading-lg text-white opacity-75" ></i><span class= "ml-2" > Share</span>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-twitter text-lg leading-lg text-white opacity-75" ></i><span class= "ml-2" > Tweet</span>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-pinterest text-lg leading-lg text-white opacity-75" ></i><span class= "ml-2" > Pin</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class= "relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-lightBlue-500 mb-3" >
<div class= "container px-4 mx-auto flex flex-wrap items-center justify-between" >
<div class= "w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start" >
<a class= "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href= "#pablo" >
lightBlue Color
</a>
<button class= "cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type= "button" >
<span class= "block relative w-6 h-px rounded-sm bg-white" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
</button>
</div>
<div class= "lg:flex flex-grow items-center" >
<ul class= "flex flex-col lg:flex-row list-none ml-auto" >
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-facebook-square text-lg leading-lg text-white opacity-75" ></i><span class= "ml-2" > Share</span>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-twitter text-lg leading-lg text-white opacity-75" ></i><span class= "ml-2" > Tweet</span>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-pinterest text-lg leading-lg text-white opacity-75" ></i><span class= "ml-2" > Pin</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class= "relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-indigo-500 mb-3" >
<div class= "container px-4 mx-auto flex flex-wrap items-center justify-between" >
<div class= "w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start" >
<a class= "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href= "#pablo" >
indigo Color
</a>
<button class= "cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type= "button" >
<span class= "block relative w-6 h-px rounded-sm bg-white" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
</button>
</div>
<div class= "lg:flex flex-grow items-center" >
<ul class= "flex flex-col lg:flex-row list-none ml-auto" >
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-facebook-square text-lg leading-lg text-white opacity-75" ></i><span class= "ml-2" > Share</span>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-twitter text-lg leading-lg text-white opacity-75" ></i><span class= "ml-2" > Tweet</span>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-pinterest text-lg leading-lg text-white opacity-75" ></i><span class= "ml-2" > Pin</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class= "relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-purple-500 mb-3" >
<div class= "container px-4 mx-auto flex flex-wrap items-center justify-between" >
<div class= "w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start" >
<a class= "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href= "#pablo" >
purple Color
</a>
<button class= "cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type= "button" >
<span class= "block relative w-6 h-px rounded-sm bg-white" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
</button>
</div>
<div class= "lg:flex flex-grow items-center" >
<ul class= "flex flex-col lg:flex-row list-none ml-auto" >
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-facebook-square text-lg leading-lg text-white opacity-75" ></i><span class= "ml-2" > Share</span>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-twitter text-lg leading-lg text-white opacity-75" ></i><span class= "ml-2" > Tweet</span>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-pinterest text-lg leading-lg text-white opacity-75" ></i><span class= "ml-2" > Pin</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class= "relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-pink-500 mb-3" >
<div class= "container px-4 mx-auto flex flex-wrap items-center justify-between" >
<div class= "w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start" >
<a class= "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href= "#pablo" >
pink Color
</a>
<button class= "cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type= "button" >
<span class= "block relative w-6 h-px rounded-sm bg-white" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
</button>
</div>
<div class= "lg:flex flex-grow items-center" >
<ul class= "flex flex-col lg:flex-row list-none ml-auto" >
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-facebook-square text-lg leading-lg text-white opacity-75" ></i><span class= "ml-2" > Share</span>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-twitter text-lg leading-lg text-white opacity-75" ></i><span class= "ml-2" > Tweet</span>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-pinterest text-lg leading-lg text-white opacity-75" ></i><span class= "ml-2" > Pin</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
Search bar
You can also have a search bar inside your navigation menu. On the left you can keep your brand text with some links, and on the right you can have a search for your website.
<nav class= "relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-blueGray-500 mb-3" >
<div class= "container px-4 mx-auto flex flex-wrap items-center justify-between" >
<div class= "w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start" >
<a class= "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href= "#pablo" >
blueGray Color
</a>
<button class= "cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type= "button" >
<span class= "block relative w-6 h-px rounded-sm bg-white" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
</button>
</div>
<div class= "lg:flex flex-grow items-center" >
<ul class= "flex flex-col lg:flex-row list-none mr-auto" >
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-facebook-square text-lg leading-lg text-white opacity-75" ></i>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-twitter text-lg leading-lg text-white opacity-75" ></i> <span class= "ml-2" > Tweet</span>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<span class= "ml-2" > Settings</span>
</a>
</li>
</ul>
<div class= "relative flex w-full sm:w-7/12 md:w-5/12 px-4 flex-wrap items-stretch lg:ml-auto" >
<div class= "flex" >
<span class= "font-normal leading-snug flex text-center white-space-no-wrap border border-solid border-blueGray-600 rounded-full text-sm bg-blueGray-100 items-center rounded-r-none pl-2 py-1 text-blueGray-800 border-r-0 placeholder-blueGray-300" >
<i class= "fas fa-search" ></i>
</span>
</div>
<input type= "text" class= "px-2 py-1 h-8 border border-solid border-blueGray-600 rounded-full text-sm leading-snug text-blueGray-700 bg-blueGray-100 shadow-none outline-none focus:outline-none w-full font-normal rounded-l-none flex-1 border-l-0 placeholder-blueGray-300" placeholder= "Search blueGray" />
</div>
</div>
</div>
</nav>
<nav class= "relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-red-500 mb-3" >
<div class= "container px-4 mx-auto flex flex-wrap items-center justify-between" >
<div class= "w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start" >
<a class= "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href= "#pablo" >
red Color
</a>
<button class= "cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type= "button" >
<span class= "block relative w-6 h-px rounded-sm bg-white" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
</button>
</div>
<div class= "lg:flex flex-grow items-center" >
<ul class= "flex flex-col lg:flex-row list-none mr-auto" >
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-facebook-square text-lg leading-lg text-white opacity-75" ></i>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-twitter text-lg leading-lg text-white opacity-75" ></i> <span class= "ml-2" > Tweet</span>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<span class= "ml-2" > Settings</span>
</a>
</li>
</ul>
<div class= "relative flex w-full sm:w-7/12 md:w-5/12 px-4 flex-wrap items-stretch lg:ml-auto" >
<div class= "flex" >
<span class= "font-normal leading-snug flex text-center white-space-no-wrap border border-solid border-red-600 rounded-full text-sm bg-red-100 items-center rounded-r-none pl-2 py-1 text-red-800 border-r-0 placeholder-red-300" >
<i class= "fas fa-search" ></i>
</span>
</div>
<input type= "text" class= "px-2 py-1 h-8 border border-solid border-red-600 rounded-full text-sm leading-snug text-red-700 bg-red-100 shadow-none outline-none focus:outline-none w-full font-normal rounded-l-none flex-1 border-l-0 placeholder-red-300" placeholder= "Search red" />
</div>
</div>
</div>
</nav>
<nav class= "relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-orange-500 mb-3" >
<div class= "container px-4 mx-auto flex flex-wrap items-center justify-between" >
<div class= "w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start" >
<a class= "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href= "#pablo" >
orange Color
</a>
<button class= "cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type= "button" >
<span class= "block relative w-6 h-px rounded-sm bg-white" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
</button>
</div>
<div class= "lg:flex flex-grow items-center" >
<ul class= "flex flex-col lg:flex-row list-none mr-auto" >
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-facebook-square text-lg leading-lg text-white opacity-75" ></i>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-twitter text-lg leading-lg text-white opacity-75" ></i> <span class= "ml-2" > Tweet</span>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<span class= "ml-2" > Settings</span>
</a>
</li>
</ul>
<div class= "relative flex w-full sm:w-7/12 md:w-5/12 px-4 flex-wrap items-stretch lg:ml-auto" >
<div class= "flex" >
<span class= "font-normal leading-snug flex text-center white-space-no-wrap border border-solid border-orange-600 rounded-full text-sm bg-orange-100 items-center rounded-r-none pl-2 py-1 text-orange-800 border-r-0 placeholder-orange-300" >
<i class= "fas fa-search" ></i>
</span>
</div>
<input type= "text" class= "px-2 py-1 h-8 border border-solid border-orange-600 rounded-full text-sm leading-snug text-orange-700 bg-orange-100 shadow-none outline-none focus:outline-none w-full font-normal rounded-l-none flex-1 border-l-0 placeholder-orange-300" placeholder= "Search orange" />
</div>
</div>
</div>
</nav>
<nav class= "relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-amber-500 mb-3" >
<div class= "container px-4 mx-auto flex flex-wrap items-center justify-between" >
<div class= "w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start" >
<a class= "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href= "#pablo" >
amber Color
</a>
<button class= "cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type= "button" >
<span class= "block relative w-6 h-px rounded-sm bg-white" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
</button>
</div>
<div class= "lg:flex flex-grow items-center" >
<ul class= "flex flex-col lg:flex-row list-none mr-auto" >
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-facebook-square text-lg leading-lg text-white opacity-75" ></i>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-twitter text-lg leading-lg text-white opacity-75" ></i> <span class= "ml-2" > Tweet</span>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<span class= "ml-2" > Settings</span>
</a>
</li>
</ul>
<div class= "relative flex w-full sm:w-7/12 md:w-5/12 px-4 flex-wrap items-stretch lg:ml-auto" >
<div class= "flex" >
<span class= "font-normal leading-snug flex text-center white-space-no-wrap border border-solid border-amber-600 rounded-full text-sm bg-amber-100 items-center rounded-r-none pl-2 py-1 text-amber-800 border-r-0 placeholder-amber-300" >
<i class= "fas fa-search" ></i>
</span>
</div>
<input type= "text" class= "px-2 py-1 h-8 border border-solid border-amber-600 rounded-full text-sm leading-snug text-amber-700 bg-amber-100 shadow-none outline-none focus:outline-none w-full font-normal rounded-l-none flex-1 border-l-0 placeholder-amber-300" placeholder= "Search amber" />
</div>
</div>
</div>
</nav>
<nav class= "relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-emerald-500 mb-3" >
<div class= "container px-4 mx-auto flex flex-wrap items-center justify-between" >
<div class= "w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start" >
<a class= "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href= "#pablo" >
emerald Color
</a>
<button class= "cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type= "button" >
<span class= "block relative w-6 h-px rounded-sm bg-white" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
</button>
</div>
<div class= "lg:flex flex-grow items-center" >
<ul class= "flex flex-col lg:flex-row list-none mr-auto" >
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-facebook-square text-lg leading-lg text-white opacity-75" ></i>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-twitter text-lg leading-lg text-white opacity-75" ></i> <span class= "ml-2" > Tweet</span>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<span class= "ml-2" > Settings</span>
</a>
</li>
</ul>
<div class= "relative flex w-full sm:w-7/12 md:w-5/12 px-4 flex-wrap items-stretch lg:ml-auto" >
<div class= "flex" >
<span class= "font-normal leading-snug flex text-center white-space-no-wrap border border-solid border-emerald-600 rounded-full text-sm bg-emerald-100 items-center rounded-r-none pl-2 py-1 text-emerald-800 border-r-0 placeholder-emerald-300" >
<i class= "fas fa-search" ></i>
</span>
</div>
<input type= "text" class= "px-2 py-1 h-8 border border-solid border-emerald-600 rounded-full text-sm leading-snug text-emerald-700 bg-emerald-100 shadow-none outline-none focus:outline-none w-full font-normal rounded-l-none flex-1 border-l-0 placeholder-emerald-300" placeholder= "Search emerald" />
</div>
</div>
</div>
</nav>
<nav class= "relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-teal-500 mb-3" >
<div class= "container px-4 mx-auto flex flex-wrap items-center justify-between" >
<div class= "w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start" >
<a class= "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href= "#pablo" >
teal Color
</a>
<button class= "cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type= "button" >
<span class= "block relative w-6 h-px rounded-sm bg-white" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
</button>
</div>
<div class= "lg:flex flex-grow items-center" >
<ul class= "flex flex-col lg:flex-row list-none mr-auto" >
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-facebook-square text-lg leading-lg text-white opacity-75" ></i>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-twitter text-lg leading-lg text-white opacity-75" ></i> <span class= "ml-2" > Tweet</span>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<span class= "ml-2" > Settings</span>
</a>
</li>
</ul>
<div class= "relative flex w-full sm:w-7/12 md:w-5/12 px-4 flex-wrap items-stretch lg:ml-auto" >
<div class= "flex" >
<span class= "font-normal leading-snug flex text-center white-space-no-wrap border border-solid border-teal-600 rounded-full text-sm bg-teal-100 items-center rounded-r-none pl-2 py-1 text-teal-800 border-r-0 placeholder-teal-300" >
<i class= "fas fa-search" ></i>
</span>
</div>
<input type= "text" class= "px-2 py-1 h-8 border border-solid border-teal-600 rounded-full text-sm leading-snug text-teal-700 bg-teal-100 shadow-none outline-none focus:outline-none w-full font-normal rounded-l-none flex-1 border-l-0 placeholder-teal-300" placeholder= "Search teal" />
</div>
</div>
</div>
</nav>
<nav class= "relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-lightBlue-500 mb-3" >
<div class= "container px-4 mx-auto flex flex-wrap items-center justify-between" >
<div class= "w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start" >
<a class= "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href= "#pablo" >
lightBlue Color
</a>
<button class= "cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type= "button" >
<span class= "block relative w-6 h-px rounded-sm bg-white" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
</button>
</div>
<div class= "lg:flex flex-grow items-center" >
<ul class= "flex flex-col lg:flex-row list-none mr-auto" >
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-facebook-square text-lg leading-lg text-white opacity-75" ></i>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-twitter text-lg leading-lg text-white opacity-75" ></i> <span class= "ml-2" > Tweet</span>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<span class= "ml-2" > Settings</span>
</a>
</li>
</ul>
<div class= "relative flex w-full sm:w-7/12 md:w-5/12 px-4 flex-wrap items-stretch lg:ml-auto" >
<div class= "flex" >
<span class= "font-normal leading-snug flex text-center white-space-no-wrap border border-solid border-lightBlue-600 rounded-full text-sm bg-lightBlue-100 items-center rounded-r-none pl-2 py-1 text-lightBlue-800 border-r-0 placeholder-lightBlue-300" >
<i class= "fas fa-search" ></i>
</span>
</div>
<input type= "text" class= "px-2 py-1 h-8 border border-solid border-lightBlue-600 rounded-full text-sm leading-snug text-lightBlue-700 bg-lightBlue-100 shadow-none outline-none focus:outline-none w-full font-normal rounded-l-none flex-1 border-l-0 placeholder-lightBlue-300" placeholder= "Search lightBlue" />
</div>
</div>
</div>
</nav>
<nav class= "relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-indigo-500 mb-3" >
<div class= "container px-4 mx-auto flex flex-wrap items-center justify-between" >
<div class= "w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start" >
<a class= "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href= "#pablo" >
indigo Color
</a>
<button class= "cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type= "button" >
<span class= "block relative w-6 h-px rounded-sm bg-white" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
</button>
</div>
<div class= "lg:flex flex-grow items-center" >
<ul class= "flex flex-col lg:flex-row list-none mr-auto" >
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-facebook-square text-lg leading-lg text-white opacity-75" ></i>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-twitter text-lg leading-lg text-white opacity-75" ></i> <span class= "ml-2" > Tweet</span>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<span class= "ml-2" > Settings</span>
</a>
</li>
</ul>
<div class= "relative flex w-full sm:w-7/12 md:w-5/12 px-4 flex-wrap items-stretch lg:ml-auto" >
<div class= "flex" >
<span class= "font-normal leading-snug flex text-center white-space-no-wrap border border-solid border-indigo-600 rounded-full text-sm bg-indigo-100 items-center rounded-r-none pl-2 py-1 text-indigo-800 border-r-0 placeholder-indigo-300" >
<i class= "fas fa-search" ></i>
</span>
</div>
<input type= "text" class= "px-2 py-1 h-8 border border-solid border-indigo-600 rounded-full text-sm leading-snug text-indigo-700 bg-indigo-100 shadow-none outline-none focus:outline-none w-full font-normal rounded-l-none flex-1 border-l-0 placeholder-indigo-300" placeholder= "Search indigo" />
</div>
</div>
</div>
</nav>
<nav class= "relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-purple-500 mb-3" >
<div class= "container px-4 mx-auto flex flex-wrap items-center justify-between" >
<div class= "w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start" >
<a class= "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href= "#pablo" >
purple Color
</a>
<button class= "cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type= "button" >
<span class= "block relative w-6 h-px rounded-sm bg-white" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
</button>
</div>
<div class= "lg:flex flex-grow items-center" >
<ul class= "flex flex-col lg:flex-row list-none mr-auto" >
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-facebook-square text-lg leading-lg text-white opacity-75" ></i>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-twitter text-lg leading-lg text-white opacity-75" ></i> <span class= "ml-2" > Tweet</span>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<span class= "ml-2" > Settings</span>
</a>
</li>
</ul>
<div class= "relative flex w-full sm:w-7/12 md:w-5/12 px-4 flex-wrap items-stretch lg:ml-auto" >
<div class= "flex" >
<span class= "font-normal leading-snug flex text-center white-space-no-wrap border border-solid border-purple-600 rounded-full text-sm bg-purple-100 items-center rounded-r-none pl-2 py-1 text-purple-800 border-r-0 placeholder-purple-300" >
<i class= "fas fa-search" ></i>
</span>
</div>
<input type= "text" class= "px-2 py-1 h-8 border border-solid border-purple-600 rounded-full text-sm leading-snug text-purple-700 bg-purple-100 shadow-none outline-none focus:outline-none w-full font-normal rounded-l-none flex-1 border-l-0 placeholder-purple-300" placeholder= "Search purple" />
</div>
</div>
</div>
</nav>
<nav class= "relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-pink-500 mb-3" >
<div class= "container px-4 mx-auto flex flex-wrap items-center justify-between" >
<div class= "w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start" >
<a class= "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href= "#pablo" >
pink Color
</a>
<button class= "cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type= "button" >
<span class= "block relative w-6 h-px rounded-sm bg-white" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
<span class= "block relative w-6 h-px rounded-sm bg-white mt-1" ></span>
</button>
</div>
<div class= "lg:flex flex-grow items-center" >
<ul class= "flex flex-col lg:flex-row list-none mr-auto" >
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-facebook-square text-lg leading-lg text-white opacity-75" ></i>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-twitter text-lg leading-lg text-white opacity-75" ></i> <span class= "ml-2" > Tweet</span>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<span class= "ml-2" > Settings</span>
</a>
</li>
</ul>
<div class= "relative flex w-full sm:w-7/12 md:w-5/12 px-4 flex-wrap items-stretch lg:ml-auto" >
<div class= "flex" >
<span class= "font-normal leading-snug flex text-center white-space-no-wrap border border-solid border-pink-600 rounded-full text-sm bg-pink-100 items-center rounded-r-none pl-2 py-1 text-pink-800 border-r-0 placeholder-pink-300" >
<i class= "fas fa-search" ></i>
</span>
</div>
<input type= "text" class= "px-2 py-1 h-8 border border-solid border-pink-600 rounded-full text-sm leading-snug text-pink-700 bg-pink-100 shadow-none outline-none focus:outline-none w-full font-normal rounded-l-none flex-1 border-l-0 placeholder-pink-300" placeholder= "Search pink" />
</div>
</div>
</div>
</nav>
Dynamic
We’ve taken a simple example, one that it is most used in real-life website, an naviagtion menu with text and icon links. You can change the links with anything from the above Navbars and everything will work properly.
<template>
<nav class= "relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-blueGray-500 mb-3" >
<div class= "container px-4 mx-auto flex flex-wrap items-center justify-between" >
<div class= "w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start" >
<a class= "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href= "#pablo" >
blueGray Notus
</a>
<button class= "text-white cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type= "button" v-on:click= "toggleNavbar()" >
<i class= "fas fa-bars" ></i>
</button>
</div>
<div v-bind:class= "{'hidden': !showMenu, 'flex': showMenu}" class= "lg:flex lg:flex-grow items-center" >
<ul class= "flex flex-col lg:flex-row list-none ml-auto" >
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-facebook-square text-lg leading-lg text-white opacity-75" /><span class= "ml-2" > Share</span>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-twitter text-lg leading-lg text-white opacity-75" /><span class= "ml-2" > Tweet</span>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-pinterest text-lg leading-lg text-white opacity-75" /><span class= "ml-2" > Pin</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
</template>
<script>
export default {
name : " blueGray-navbar " ,
data () {
return {
showMenu : false
}
},
methods : {
toggleNavbar : function (){
this . showMenu = ! this . showMenu ;
}
}
}
</script>
<template>
<nav class= "relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-red-500 mb-3" >
<div class= "container px-4 mx-auto flex flex-wrap items-center justify-between" >
<div class= "w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start" >
<a class= "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href= "#pablo" >
red Notus
</a>
<button class= "text-white cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type= "button" v-on:click= "toggleNavbar()" >
<i class= "fas fa-bars" ></i>
</button>
</div>
<div v-bind:class= "{'hidden': !showMenu, 'flex': showMenu}" class= "lg:flex lg:flex-grow items-center" >
<ul class= "flex flex-col lg:flex-row list-none ml-auto" >
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-facebook-square text-lg leading-lg text-white opacity-75" /><span class= "ml-2" > Share</span>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-twitter text-lg leading-lg text-white opacity-75" /><span class= "ml-2" > Tweet</span>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-pinterest text-lg leading-lg text-white opacity-75" /><span class= "ml-2" > Pin</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
</template>
<script>
export default {
name : " red-navbar " ,
data () {
return {
showMenu : false
}
},
methods : {
toggleNavbar : function (){
this . showMenu = ! this . showMenu ;
}
}
}
</script>
<template>
<nav class= "relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-orange-500 mb-3" >
<div class= "container px-4 mx-auto flex flex-wrap items-center justify-between" >
<div class= "w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start" >
<a class= "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href= "#pablo" >
orange Notus
</a>
<button class= "text-white cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type= "button" v-on:click= "toggleNavbar()" >
<i class= "fas fa-bars" ></i>
</button>
</div>
<div v-bind:class= "{'hidden': !showMenu, 'flex': showMenu}" class= "lg:flex lg:flex-grow items-center" >
<ul class= "flex flex-col lg:flex-row list-none ml-auto" >
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-facebook-square text-lg leading-lg text-white opacity-75" /><span class= "ml-2" > Share</span>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-twitter text-lg leading-lg text-white opacity-75" /><span class= "ml-2" > Tweet</span>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-pinterest text-lg leading-lg text-white opacity-75" /><span class= "ml-2" > Pin</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
</template>
<script>
export default {
name : " orange-navbar " ,
data () {
return {
showMenu : false
}
},
methods : {
toggleNavbar : function (){
this . showMenu = ! this . showMenu ;
}
}
}
</script>
<template>
<nav class= "relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-amber-500 mb-3" >
<div class= "container px-4 mx-auto flex flex-wrap items-center justify-between" >
<div class= "w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start" >
<a class= "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href= "#pablo" >
amber Notus
</a>
<button class= "text-white cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type= "button" v-on:click= "toggleNavbar()" >
<i class= "fas fa-bars" ></i>
</button>
</div>
<div v-bind:class= "{'hidden': !showMenu, 'flex': showMenu}" class= "lg:flex lg:flex-grow items-center" >
<ul class= "flex flex-col lg:flex-row list-none ml-auto" >
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-facebook-square text-lg leading-lg text-white opacity-75" /><span class= "ml-2" > Share</span>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-twitter text-lg leading-lg text-white opacity-75" /><span class= "ml-2" > Tweet</span>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-pinterest text-lg leading-lg text-white opacity-75" /><span class= "ml-2" > Pin</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
</template>
<script>
export default {
name : " amber-navbar " ,
data () {
return {
showMenu : false
}
},
methods : {
toggleNavbar : function (){
this . showMenu = ! this . showMenu ;
}
}
}
</script>
</div>
<template>
<nav class= "relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-emerald-500 mb-3" >
<div class= "container px-4 mx-auto flex flex-wrap items-center justify-between" >
<div class= "w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start" >
<a class= "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href= "#pablo" >
emerald Notus
</a>
<button class= "text-white cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type= "button" v-on:click= "toggleNavbar()" >
<i class= "fas fa-bars" ></i>
</button>
</div>
<div v-bind:class= "{'hidden': !showMenu, 'flex': showMenu}" class= "lg:flex lg:flex-grow items-center" >
<ul class= "flex flex-col lg:flex-row list-none ml-auto" >
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-facebook-square text-lg leading-lg text-white opacity-75" /><span class= "ml-2" > Share</span>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-twitter text-lg leading-lg text-white opacity-75" /><span class= "ml-2" > Tweet</span>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-pinterest text-lg leading-lg text-white opacity-75" /><span class= "ml-2" > Pin</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
</template>
<script>
export default {
name : " emerald-navbar " ,
data () {
return {
showMenu : false
}
},
methods : {
toggleNavbar : function (){
this . showMenu = ! this . showMenu ;
}
}
}
</script>
</div>
<template>
<nav class= "relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-teal-500 mb-3" >
<div class= "container px-4 mx-auto flex flex-wrap items-center justify-between" >
<div class= "w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start" >
<a class= "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href= "#pablo" >
teal Notus
</a>
<button class= "text-white cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type= "button" v-on:click= "toggleNavbar()" >
<i class= "fas fa-bars" ></i>
</button>
</div>
<div v-bind:class= "{'hidden': !showMenu, 'flex': showMenu}" class= "lg:flex lg:flex-grow items-center" >
<ul class= "flex flex-col lg:flex-row list-none ml-auto" >
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-facebook-square text-lg leading-lg text-white opacity-75" /><span class= "ml-2" > Share</span>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-twitter text-lg leading-lg text-white opacity-75" /><span class= "ml-2" > Tweet</span>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-pinterest text-lg leading-lg text-white opacity-75" /><span class= "ml-2" > Pin</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
</template>
<script>
export default {
name : " teal-navbar " ,
data () {
return {
showMenu : false
}
},
methods : {
toggleNavbar : function (){
this . showMenu = ! this . showMenu ;
}
}
}
</script>
</div>
<template>
<nav class= "relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-lightBlue-500 mb-3" >
<div class= "container px-4 mx-auto flex flex-wrap items-center justify-between" >
<div class= "w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start" >
<a class= "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href= "#pablo" >
lightBlue Notus
</a>
<button class= "text-white cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type= "button" v-on:click= "toggleNavbar()" >
<i class= "fas fa-bars" ></i>
</button>
</div>
<div v-bind:class= "{'hidden': !showMenu, 'flex': showMenu}" class= "lg:flex lg:flex-grow items-center" >
<ul class= "flex flex-col lg:flex-row list-none ml-auto" >
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-facebook-square text-lg leading-lg text-white opacity-75" /><span class= "ml-2" > Share</span>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-twitter text-lg leading-lg text-white opacity-75" /><span class= "ml-2" > Tweet</span>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-pinterest text-lg leading-lg text-white opacity-75" /><span class= "ml-2" > Pin</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
</template>
<script>
export default {
name : " lightBlue-navbar " ,
data () {
return {
showMenu : false
}
},
methods : {
toggleNavbar : function (){
this . showMenu = ! this . showMenu ;
}
}
}
</script>
</div>
<template>
<nav class= "relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-indigo-500 mb-3" >
<div class= "container px-4 mx-auto flex flex-wrap items-center justify-between" >
<div class= "w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start" >
<a class= "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href= "#pablo" >
indigo Notus
</a>
<button class= "text-white cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type= "button" v-on:click= "toggleNavbar()" >
<i class= "fas fa-bars" ></i>
</button>
</div>
<div v-bind:class= "{'hidden': !showMenu, 'flex': showMenu}" class= "lg:flex lg:flex-grow items-center" >
<ul class= "flex flex-col lg:flex-row list-none ml-auto" >
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-facebook-square text-lg leading-lg text-white opacity-75" /><span class= "ml-2" > Share</span>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-twitter text-lg leading-lg text-white opacity-75" /><span class= "ml-2" > Tweet</span>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-pinterest text-lg leading-lg text-white opacity-75" /><span class= "ml-2" > Pin</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
</template>
<script>
export default {
name : " indigo-navbar " ,
data () {
return {
showMenu : false
}
},
methods : {
toggleNavbar : function (){
this . showMenu = ! this . showMenu ;
}
}
}
</script>
</div>
<template>
<nav class= "relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-purple-500 mb-3" >
<div class= "container px-4 mx-auto flex flex-wrap items-center justify-between" >
<div class= "w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start" >
<a class= "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href= "#pablo" >
purple Notus
</a>
<button class= "text-white cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type= "button" v-on:click= "toggleNavbar()" >
<i class= "fas fa-bars" ></i>
</button>
</div>
<div v-bind:class= "{'hidden': !showMenu, 'flex': showMenu}" class= "lg:flex lg:flex-grow items-center" >
<ul class= "flex flex-col lg:flex-row list-none ml-auto" >
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-facebook-square text-lg leading-lg text-white opacity-75" /><span class= "ml-2" > Share</span>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-twitter text-lg leading-lg text-white opacity-75" /><span class= "ml-2" > Tweet</span>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-pinterest text-lg leading-lg text-white opacity-75" /><span class= "ml-2" > Pin</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
</template>
<script>
export default {
name : " purple-navbar " ,
data () {
return {
showMenu : false
}
},
methods : {
toggleNavbar : function (){
this . showMenu = ! this . showMenu ;
}
}
}
</script>
</div>
<template>
<nav class= "relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-pink-500 mb-3" >
<div class= "container px-4 mx-auto flex flex-wrap items-center justify-between" >
<div class= "w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start" >
<a class= "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href= "#pablo" >
pink Notus
</a>
<button class= "text-white cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type= "button" v-on:click= "toggleNavbar()" >
<i class= "fas fa-bars" ></i>
</button>
</div>
<div v-bind:class= "{'hidden': !showMenu, 'flex': showMenu}" class= "lg:flex lg:flex-grow items-center" >
<ul class= "flex flex-col lg:flex-row list-none ml-auto" >
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-facebook-square text-lg leading-lg text-white opacity-75" /><span class= "ml-2" > Share</span>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-twitter text-lg leading-lg text-white opacity-75" /><span class= "ml-2" > Tweet</span>
</a>
</li>
<li class= "nav-item" >
<a class= "px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href= "#pablo" >
<i class= "fab fa-pinterest text-lg leading-lg text-white opacity-75" /><span class= "ml-2" > Pin</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
</template>
<script>
export default {
name : " pink-navbar " ,
data () {
return {
showMenu : false
}
},
methods : {
toggleNavbar : function (){
this . showMenu = ! this . showMenu ;
}
}
}
</script>
</div>
</div>
</div>