Navigations
Navigation 01
=
<div class="bg-gray-100 text-gray-600 px-6 lg:px-8 py-6">
<div class="max-w-screen-xl mx-auto flex justify-between items-center relative">
<a href="#">
<img class="h-8" src="http://demo-assets.uibak.com/themesdev/drops-logo.svg"alt="logo placeholder">
</a>
<nav class="flex flex-col justify-center items-center p-8 md:p-0 space-y-4 md:space-y-0 md:flex-row md:space-x-4 font-semibold absolute top-16 md:top-0 left-0 w-full md:w-auto flex-1 md:relative bg-gray-200 md:bg-transparent">
<a href="#" class="hover:opacity-70">Home</a>
<a href="#" class="hover:opacity-70">Services</a>
<a href="#" class="hover:opacity-70">Pricing</a>
<a href="#" class="hover:opacity-70">Blog</a>
<a href="#" class="hover:opacity-70">Contact</a>
</nav>
<a href="#" class="inline-block bg-gray-600 font-semibold rounded-lg text-sm md:text-base py-3 px-5 text-white">Call to action</a>
</div>
</div>
Navigation 02
=
<div class="bg-gray-100 text-gray-600 px-6 lg:px-8 py-4 lg:py-5">
<div class="max-w-screen-xl mx-auto flex justify-between items-center relative">
<a href="#">
<img class="h-9" src="http://demo-assets.uibak.com/themesdev/boxify-logo.svg"alt="logo placeholder">
</a>
<div class="flex justify-between space-x-4">
<nav class="flex flex-col justify-center items-center p-8 md:p-0 space-y-4 md:space-y-0 md:flex-row md:space-x-4 font-semibold absolute top-16 md:top-0 left-0 w-full md:w-auto md:relative bg-gray-200 md:bg-transparent">
<a href="#" class="hover:opacity-70">Home</a>
<a href="#" class="hover:opacity-70">Services</a>
<a href="#" class="hover:opacity-70">Pricing</a>
</nav>
<button class="w-9 bg-gray-600 p-2 rounded-md text-gray-200">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
</div>
Navigation 03
=
<div class="bg-gray-100 text-gray-600 px-6 lg:px-8 py-4 lg:py-5">
<div class="max-w-screen-xl mx-auto flex justify-between items-center relative">
<div class="flex justify-between md:space-x-4 lg:space-x-12">
<a href="#">
<img class="h-8" src="http://demo-assets.uibak.com/themesdev/feedback-logo.svg"alt="logo placeholder">
</a>
<nav class="flex flex-col justify-center items-center p-8 md:p-0 space-y-4 md:space-y-0 md:flex-row md:space-x-4 lg:space-x-6 font-semibold absolute top-16 md:top-0 left-0 w-full md:w-auto md:relative bg-gray-200 md:bg-transparent">
<a href="#" class="hover:opacity-70">Home</a>
<a href="#" class="hover:opacity-70">Services</a>
<a href="#" class="hover:opacity-70">Pricing</a>
<a href="#" class="hover:opacity-70">Blog</a>
<a href="#" class="hover:opacity-70">Contact</a>
</nav>
</div>
<button class="w-9 p-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</button>
</div>
</div>
Navigation 04
=
<div class="bg-gray-100 text-gray-600 px-6 lg:px-8 py-4">
<div class="max-w-screen-xl mx-auto flex justify-between items-center relative">
<button class="w-9 bg-gray-300 p-2 rounded-md text-gray-600">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
</svg>
</button>
<a href="#">
<img class="h-7" src="http://demo-assets.uibak.com/themesdev/edge-logo.svg"alt="logo placeholder">
</a>
<a href="#" class="inline-block bg-gray-600 font-semibold rounded-lg text-sm py-3 px-5 text-white">Call to action</a>
</div>
</div>
Navigation 05
=
<div class="bg-gray-100 text-gray-600 px-6 lg:px-8 py-4">
<div class="max-w-screen-xl mx-auto flex justify-between items-center relative">
<nav class="flex flex-col justify-center items-center p-8 md:p-0 space-y-4 md:space-y-0 md:flex-row md:space-x-4 lg:space-x-6 font-semibold absolute top-16 md:top-0 left-0 w-full md:w-auto md:relative bg-gray-200 md:bg-transparent">
<a href="#" class="hover:opacity-70">Home</a>
<a href="#" class="hover:opacity-70">Services</a>
<a href="#" class="hover:opacity-70">Pricing</a>
<a href="#" class="hover:opacity-70">Blog</a>
<a href="#" class="hover:opacity-70">Contact</a>
</nav>
<a href="#">
<img class="h-7" src="http://demo-assets.uibak.com/themesdev/edge-logo.svg"alt="logo placeholder">
</a>
<div class="flex">
<a href="#" class="inline-block bg-transparant font-semibold rounded-lg text-sm py-3 px-5 text-gray-600">Log in</a>
<a href="#" class="inline-block bg-gray-600 font-semibold rounded-lg text-sm py-3 px-5 text-white">Call to action</a>
</div>
</div>
</div>
Navigation 06
=
<div class="bg-gray-100 text-gray-600 px-6 lg:px-8 py-4">
<div class="max-w-screen-xl mx-auto flex justify-center items-center relative">
<nav class="flex flex-col justify-center items-center p-8 md:p-0 space-y-4 md:space-y-0 md:flex-row md:space-x-4 lg:space-x-6 xl:space-x-12 font-semibold absolute top-16 md:top-0 left-0 w-full md:w-auto md:relative bg-gray-200 md:bg-transparent">
<a href="#" class="hover:opacity-70">Home</a>
<a href="#" class="hover:opacity-70">Services</a>
<a href="#" class="hover:opacity-70">Pricing</a>
<a href="#" class="order-first md:order-none">
<img class="h-7 mb-6 md:mb-0" src="http://demo-assets.uibak.com/themesdev/edge-logo.svg"alt="logo placeholder">
</a>
<a href="#" class="hover:opacity-70">Blog</a>
<a href="#" class="hover:opacity-70">FAQ</a>
<a href="#" class="hover:opacity-70">Contact</a>
</nav>
</div>
</div>
Navigation 07
=
<div class="bg-gray-100 text-gray-600 px-6 lg:px-8 py-4">
<div class="max-w-screen-xl mx-auto flex justify-between items-center relative">
<button class="w-9 bg-gray-300 p-2 rounded-md text-gray-600">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
</svg>
</button>
<a href="#">
<img class="h-7" src="http://demo-assets.uibak.com/themesdev/edge-logo.svg"alt="logo placeholder">
</a>
<button class="w-9 p-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</button>
</div>
</div>
<div class="bg-gray-200 text-gray-600 px-6 lg:px-8 py-4">
<nav class="max-w-screen-xl mx-auto flex flex-col justify-center md:justify-between items-center p-8 md:p-0 space-y-4 md:space-y-0 md:flex-row md:space-x-4 lg:space-x-6 xl:space-x-12 font-semibold absolute top-16 md:top-0 left-0 w-full md:w-auto md:relative bg-gray-200 md:bg-transparent">
<a href="#" class="hover:opacity-70">Home</a>
<a href="#" class="hover:opacity-70">Services</a>
<a href="#" class="hover:opacity-70">Pricing</a>
<a href="#" class="hover:opacity-70">Blog</a>
<a href="#" class="hover:opacity-70">Newsletter</a>
<a href="#" class="hover:opacity-70">FAQ</a>
<a href="#" class="hover:opacity-70">Contact</a>
</nav>
</div>
Navigation 08
=
<div class="bg-gray-100 text-gray-600 px-6 lg:px-8 py-4">
<div class="max-w-screen-xl mx-auto flex flex-col md:flex-row justify-between items-center relative">
<a href="#">
<img class="h-7" src="http://demo-assets.uibak.com/themesdev/edge-logo.svg"alt="logo placeholder">
</a>
<div class="flex space-x-2 mt-2 md:mt-0">
<a href="#" class="p-2 flex items-center space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4">
<path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
</svg>
<span class="text-sm font-semibold">Login</span>
</a>
<a href="#" class="p-2 flex items-center space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
<span class="text-sm font-semibold">Help</span>
</a>
<a href="#" class="p-2 flex items-center space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z" />
</svg>
<span class="text-sm font-semibold">Stats</span>
</a>
<a href="#" class="p-2 flex items-center space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
</svg>
<span class="text-sm font-semibold">Stats</span>
</a>
</div>
</div>
</div>
<div class="bg-gray-200 text-gray-600 px-6 lg:px-8 py-4">
<nav class="max-w-screen-xl mx-auto flex flex-col justify-center md:justify-start items-center p-8 md:p-0 space-y-4 md:space-y-0 md:flex-row md:space-x-4 lg:space-x-6 xl:space-x-12 font-semibold absolute top-24 md:top-0 left-0 w-full md:w-auto md:relative bg-gray-200 md:bg-transparent">
<a href="#" class="hover:opacity-70">Home</a>
<a href="#" class="hover:opacity-70">Services</a>
<a href="#" class="hover:opacity-70">Pricing</a>
<a href="#" class="hover:opacity-70">Blog</a>
<a href="#" class="hover:opacity-70">Newsletter</a>
<a href="#" class="hover:opacity-70">FAQ</a>
<a href="#" class="hover:opacity-70">Contact</a>
</nav>
</div>
Navigation 09
=
<div class="bg-gray-100 text-gray-600 px-6 lg:px-8 py-4">
<div class="max-w-screen-xl mx-auto flex flex-col md:flex-row justify-between items-center relative">
<a href="#" class="p-2 flex items-center space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4">
<path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
</svg>
<span class="text-base font-semibold">Login</span>
</a>
<a href="#" class="p-2 flex items-center space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
<span class="text-base font-semibold">Help</span>
</a>
<a href="#" class="p-2 flex items-center space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z" />
</svg>
<span class="text-base font-semibold">Stats</span>
</a>
<a href="#" class="p-2 flex items-center space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
</svg>
<span class="text-base font-semibold">Stats</span>
</a>
<a href="#" class="p-2 flex items-center space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
</svg>
<span class="text-base font-semibold">Notfications</span>
</a>
<a href="#" class="p-2 flex items-center space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
</svg>
<span class="text-base font-semibold">Tech</span>
</a>
</div>
</div>
Navigation 10
=
<div class="bg-gray-100 text-gray-600 px-6 lg:px-8 py-4 lg:py-5">
<div class="max-w-screen-xl mx-auto flex justify-between items-center relative">
<a href="#" class="block flex-shrink-0">
<img class="h-9" src="http://demo-assets.uibak.com/themesdev/boxify-logo.svg"alt="logo placeholder">
</a>
<div class="flex justify-between space-x-4 md:space-x-10 flex-shrink-1 md:flex-grow-0">
<nav class="flex flex-col justify-center items-center p-8 md:p-0 space-y-4 md:space-y-0 md:flex-row md:space-x-4 lg:space-x-8 font-semibold absolute top-16 md:top-0 left-0 w-full md:w-auto md:relative bg-gray-200 md:bg-transparent">
<a href="#" class="hover:opacity-70">Home</a>
<a href="#" class="hover:opacity-70">Services</a>
<a href="#" class="hover:opacity-70">Pricing</a>
<a href="#" class="hover:opacity-70">Blog</a>
<a href="#" class="hover:opacity-70">Contact</a>
</nav>
<form class="flex flex-row space-x-2 flex-1">
<input type="text" placeholder="Search term..." class="bg-white border border-gray-300 px-4 py-1 rounded-lg w-32 sm:w-auto">
<button class="inline-block bg-gray-600 font-semibold rounded-lg py-2 px-3 text-white">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</button>
</form>
</div>
</div>
</div>
Navigation 11
=
<div class="bg-gray-100 text-gray-600 px-6 lg:px-8 py-6">
<div class="max-w-screen-xl mx-auto flex justify-between items-center relative">
<a href="#">
<img class="h-8" src="http://demo-assets.uibak.com/themesdev/drops-logo.svg"alt="logo placeholder">
</a>
<nav class="flex flex-col justify-center items-center p-8 md:p-0 space-y-4 md:space-y-0 md:flex-row md:space-x-4 lg:space-x-8 font-semibold absolute top-16 md:top-0 left-0 w-full md:w-auto md:relative bg-gray-200 md:bg-transparent">
<a href="#" class="hover:opacity-70">Home</a>
<a href="#" class="hover:opacity-70">Services</a>
<a href="#" class="hover:opacity-70">Pricing</a>
<a href="#" class="hover:opacity-70">Blog</a>
<a href="#" class="hover:opacity-70">Contact</a>
<a href="#" class="inline-block bg-gray-600 font-semibold rounded-lg text-sm md:text-base py-3 px-5 text-white">Call to action</a>
</nav>
</div>
</div>
Navigation 12
=
<div class="bg-gray-100 text-gray-600 px-6 lg:px-8 py-4">
<div class="max-w-screen-xl mx-auto flex justify-between items-center relative">
<a href="#">
<img class="h-7" src="http://demo-assets.uibak.com/themesdev/edge-logo.svg"alt="logo placeholder">
</a>
<nav class="flex flex-col justify-center items-center p-8 md:p-0 space-y-4 md:space-y-0 md:flex-row md:space-x-4 lg:space-x-6 font-semibold absolute top-16 md:top-0 left-0 w-full md:w-auto md:relative bg-gray-200 md:bg-transparent">
<a href="#" class="hover:opacity-70">Home</a>
<a href="#" class="hover:opacity-70">Services</a>
<a href="#" class="hover:opacity-70">Pricing</a>
<a href="#" class="hover:opacity-70">Blog</a>
<a href="#" class="hover:opacity-70">Contact</a>
</nav>
<div class="flex">
<a href="#" class="inline-block bg-transparant font-semibold rounded-lg text-sm py-3 px-5 text-gray-600">Log in</a>
<a href="#" class="inline-block bg-gray-600 font-semibold rounded-lg text-sm py-3 px-5 text-white">Call to action</a>
</div>
</div>
</div>
Navigation 13
=
<div class="bg-gray-100 text-gray-600 px-6 lg:px-8 py-6">
<div class="max-w-screen-xl mx-auto flex justify-between items-center relative">
<a href="#">
<img class="h-8" src="http://demo-assets.uibak.com/themesdev/drops-logo.svg"alt="logo placeholder">
</a>
<nav class="flex flex-col justify-center items-center p-8 md:p-0 space-y-4 md:space-y-0 md:flex-row md:space-x-4 lg:space-x-8 font-semibold absolute top-16 md:top-0 left-0 w-full md:w-auto md:relative bg-gray-200 md:bg-transparent">
<a href="#" class="hover:opacity-70">Home</a>
<a href="#" class="hover:opacity-70">Services</a>
<a href="#" class="hover:opacity-70">Pricing</a>
<a href="#" class="hover:opacity-70">Contact</a>
</nav>
</div>
</div>
Navigation 14
=
<div class="bg-gray-100 text-gray-600 px-6 lg:px-8 py-6">
<div class="max-w-screen-xl mx-auto flex justify-between items-center relative">
<a href="#">
<img class="h-8" src="http://demo-assets.uibak.com/themesdev/drops-logo.svg"alt="logo placeholder">
</a>
<nav class="flex flex-col justify-center items-center p-8 md:p-0 space-y-4 md:space-y-0 md:flex-row md:space-x-4 font-semibold absolute top-16 md:top-0 left-0 w-full md:w-auto flex-1 md:relative bg-gray-200 md:bg-transparent">
<a href="#" class="hover:opacity-70">Home</a>
<a href="#" class="hover:opacity-70">Services</a>
<a href="#" class="hover:opacity-70">Pricing</a>
<a href="#" class="hover:opacity-70">Blog</a>
<a href="#" class="hover:opacity-70">Contact</a>
</nav>
<a href="#" class="inline-block bg-gray-600 rounded-full w-7 h-7 p-1 text-white">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
Navigation 15
=
<div class="bg-gray-100 text-gray-600 px-6 lg:px-8 py-6">
<div class="max-w-screen-xl mx-auto flex justify-between items-center relative">
<a href="#">
<img class="h-8" src="http://demo-assets.uibak.com/themesdev/drops-logo.svg"alt="logo placeholder">
</a>
<nav class="flex flex-col justify-center items-center p-8 md:p-0 space-y-4 md:space-y-0 md:flex-row md:space-x-4 font-semibold absolute top-16 md:top-0 left-0 w-full md:w-auto flex-1 md:relative bg-gray-200 md:bg-transparent">
<a href="#" class="hover:opacity-70">Home</a>
<a href="#" class="hover:opacity-70">Services</a>
<a href="#" class="hover:opacity-70">Pricing</a>
<a href="#" class="hover:opacity-70">Blog</a>
<a href="#" class="hover:opacity-70">Contact</a>
</nav>
<a href="#" class="inline-flex items-center space-x-2 hover:opacity-70">
<span class="rounded-full w-7 h-7 p-1 bg-gray-600 text-white">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
</svg>
</span>
<span class="font-semibold">Frank Spin</span>
<span class="w-4">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</span>
</a>
</div>
</div>
Navigation 16
=
<div class="bg-gray-100 text-gray-600 px-6 lg:px-8 py-4">
<div class="max-w-screen-xl mx-auto flex justify-between items-center relative">
<a href="#">
<img class="h-7" src="http://demo-assets.uibak.com/themesdev/edge-logo.svg"alt="logo placeholder">
</a>
<nav class="flex flex-col justify-center items-center p-8 md:p-0 space-y-4 md:space-y-0 md:flex-row md:space-x-4 lg:space-x-6 font-semibold absolute top-16 md:top-0 left-0 w-full md:w-auto md:relative bg-gray-200 md:bg-transparent">
<a href="#" class="hover:opacity-70">Home</a>
<a href="#" class="hover:opacity-70">Services</a>
<a href="#" class="hover:opacity-70">Pricing</a>
<a href="#" class="hover:opacity-70">Blog</a>
<a href="#" class="hover:opacity-70">Contact</a>
</nav>
<div class="flex space-x-3">
<a href="#" class="inline-block bg-transparent border-2 border-gray-600 font-semibold rounded-lg text-sm py-3 px-5 text-gray-600">Log in</a>
<a href="#" class="inline-block bg-gray-600 border-2 border-gray-600 font-semibold rounded-lg text-sm py-3 px-5 text-white">Call to action</a>
</div>
</div>
</div>
Navigation 17
=
<div class="bg-gray-100 text-gray-600 px-6 lg:px-8 py-4 lg:py-5">
<div class="max-w-screen-xl mx-auto flex justify-between space-x-6 lg:space-x-12 items-center relative">
<a href="#" class="block flex-shrink-0">
<img class="h-9" src="http://demo-assets.uibak.com/themesdev/boxify-logo.svg"alt="logo placeholder">
</a>
<form class="flex flex-row space-x-2 justify-end w-full">
<div class="relative w-full max-w-xl">
<input type="text" placeholder="Search term..." class="bg-white border border-gray-300 px-4 pl-12 py-2 rounded-md w-full block">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-5 absolute top-3 left-2">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</div>
</form>
</div>
</div>
Navigation 18
=
<div class="bg-gray-100 text-gray-600 px-6 lg:px-8 py-4 lg:py-5">
<div class="max-w-screen-xl mx-auto flex justify-between space-x-6 lg:space-x-12 items-center relative">
<form class="flex flex-row space-x-2 justify-start">
<div class="relative w-full max-w-xl">
<input type="text" placeholder="Search term..." class="bg-white border border-gray-300 px-4 pl-12 py-2 rounded-md w-full block">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-5 absolute top-3 left-2">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</div>
</form>
<a href="#" class="inline-flex items-center space-x-2 hover:opacity-70">
<span class="rounded-full w-7 h-7 p-1 bg-gray-600 text-white">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
</svg>
</span>
<span class="font-semibold hidden md:inline">Frank Spin</span>
<span class="w-4">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</span>
</a>
</div>
</div>
Navigation 19
=
<div class="bg-gray-100 text-gray-600 px-6 lg:px-8 py-4">
<div class="max-w-screen-xl mx-auto flex flex-row justify-between items-center relative">
<a href="#" class="md:hidden">
<img class="h-7" src="http://demo-assets.uibak.com/themesdev/edge-logo.svg"alt="logo placeholder">
</a>
<nav class="hidden md:flex space-x-4">
<a href="#" class="hover:opacity-70">Helpdesk</a>
<a href="#" class="hover:opacity-70">Sale</a>
<a href="#" class="hover:opacity-70">New collection</a>
</nav>
<div class="flex space-x-4 mt-2 md:mt-0">
<a href="#" class="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-6">
<path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" />
</svg>
</a>
<a href="#" class="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-6">
<path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
</div>
<div class="bg-gray-200 text-gray-600 px-6 lg:px-8 py-4">
<div class="max-w-screen-xl mx-auto flex justify-between">
<a href="#" class="hidden md:block">
<img class="h-7" src="http://demo-assets.uibak.com/themesdev/edge-logo.svg"alt="logo placeholder">
</a>
<nav class="flex flex-col justify-center md:justify-start items-center p-4 md:p-0 space-y-4 md:space-y-0 md:flex-row md:space-x-4 lg:space-x-6 xl:space-x-12 font-semibold md:top-0 left-0 w-full md:w-auto md:relative bg-gray-200 md:bg-transparent">
<a href="#" class="hover:opacity-70">Home</a>
<a href="#" class="hover:opacity-70">Clothes</a>
<a href="#" class="hover:opacity-70">Furniture</a>
<a href="#" class="hover:opacity-70">Paintings</a>
<a href="#" class="hover:opacity-70">Garden</a>
<a href="#" class="hover:opacity-70">FAQ</a>
<a href="#" class="hover:opacity-70">Contact</a>
</nav>
</div>
</div>
Navigation 20
=
<div class="bg-gray-100 text-gray-600 px-6 lg:px-8 py-3">
<div class="max-w-screen-xl mx-auto flex flex-row justify-between items-center relative">
<div class="hidden md:flex space-x-2">
<span>
Need help?
</span>
<a href="#" class="flex space-x-2 font-semibold">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4">
<path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
</svg>
<span>
+31 06 11 22 33 55
</span>
</a>
</div>
<a href="#" class="md:hidden">
<img class="h-7" src="http://demo-assets.uibak.com/themesdev/boxify-logo.svg"alt="logo placeholder">
</a>
<a href="#" class="inline-block bg-transparent border border-gray-600 font-semibold rounded-lg text-sm py-2 px-5 text-gray-600">Log in</a>
</div>
</div>
<div class="bg-gray-200 text-gray-600 px-6 lg:px-8 py-4">
<div class="max-w-screen-xl mx-auto flex justify-between">
<a href="#" class="hidden md:block">
<img class="h-7" src="http://demo-assets.uibak.com/themesdev/boxify-logo.svg"alt="logo placeholder">
</a>
<nav class="flex flex-col justify-center md:justify-start items-center p-4 md:p-0 space-y-4 md:space-y-0 md:flex-row md:space-x-4 lg:space-x-6 xl:space-x-12 font-semibold md:top-0 left-0 w-full md:w-auto md:relative bg-gray-200 md:bg-transparent">
<a href="#" class="hover:opacity-70">Internet</a>
<a href="#" class="hover:opacity-70">Phone</a>
<a href="#" class="hover:opacity-70">Devices</a>
<a href="#" class="hover:opacity-70">Sale</a>
<a href="#" class="hover:opacity-70">Contact</a>
</nav>
</div>
</div>
总共 20 条记录