Navbar inspired by Heroicons - Tailwind Component
Navbar inspired by Heroicons, it is use Tailwind CSS to create this beautiful navbar tailwind component.
navbar
Loading component...
108 lines
<h1 class="text-center font-bold py-10 text-3xl">Navbar inspired by Heroicons</h1>
<div class="bg-gradient-to-r from-purple-700 to-purple-600 text-white rounded-lg mx-8">
<nav class="container px-8 py-12 mx-auto">
<div class="flex justify-between">
<div class="flex items-center space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-purple-500" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
</svg>
<h3 class="text-xl font-medium">BRAND</h3>
</div>
<div class="flex items-center space-x-4 text-base">
<a href="#" class="flex items-center space-x-2">
<svg class="w-6 h-6 text-purple-300 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z" />
</svg>
<p class="font-semibold">Share <p class="font-semibold hidden sm:flex">on Twitter</p>
</p>
</a>
<a href="#" class="hidden md:flex">
<p class="font-light">Looking for Heroicons Classic? <b class="font-semibold">Get them here →</b></p>
</a>
</div>
</div>
<hr class="px-8 my-4 h-px bg-gray-300 border-none">
<div class="flex flex-col justify-between mt-10 lg:flex-row">
<div class="flex flex-col items-center xl:mr-60">
<h1
class="font-display text-center font-semibold text-3xl xl:text-4xl md:leading-loose md:tracking-wide md:leading-10 break-words lg:text-left">
Beautiful hand-crafted SVG icons,
<span class="sm:block text-purple-300">by the makers of <a href="https://tailwindcss.com">Tailwind
CSS</a>.</span>
</h1>
<div class="flex items-center space-x-4 md:space-x-8 py-4 font-semibold sm:text-lg">
<div class="flex items-center space-x-2">
<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" class="text-purple-400">
<path fill-rule="evenodd"
d="M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z"
clip-rule="evenodd"></path>
</svg>
<div>230 Icons</div>
</div>
<div class="flex items-center space-x-2">
<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" class="text-purple-400">
<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" class="text-purple-400">
<path fill-rule="evenodd"
d="M10 2a1 1 0 011 1v1.323l3.954 1.582 1.599-.8a1 1 0 01.894 1.79l-1.233.616 1.738 5.42a1 1 0 01-.285 1.05A3.989 3.989 0 0115 15a3.989 3.989 0 01-2.667-1.019 1 1 0 01-.285-1.05l1.715-5.349L11 6.477V16h2a1 1 0 110 2H7a1 1 0 110-2h2V6.477L6.237 7.582l1.715 5.349a1 1 0 01-.285 1.05A3.989 3.989 0 015 15a3.989 3.989 0 01-2.667-1.019 1 1 0 01-.285-1.05l1.738-5.42-1.233-.617a1 1 0 01.894-1.788l1.599.799L9 4.323V3a1 1 0 011-1zm-5 8.274l-.818 2.552c.25.112.526.174.818.174.292 0 .569-.062.818-.174L5 10.274zm10 0l-.818 2.552c.25.112.526.174.818.174.292 0 .569-.062.818-.174L15 10.274z"
clip-rule="evenodd"></path>
</svg>
<div>React + Vue Libraries</div>
</div>
<div class="flex items-center space-x-2">
<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" class="text-purple-400">
<path fill-rule="evenodd"
d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z"
clip-rule="evenodd"></path>
</svg>
<div>230 Icons</div>
</div>
</div>
</div>
<div
class="w-full sm:w-auto flex-none flex flex-col-reverse sm:flex-row sm:items-start space-y-3 space-y-reverse sm:space-y-0 sm:space-x-4 mt-10 mx-auto xl:mx-0">
<div class="inline-block">
<button type="button"
class="w-full sm:w-auto inline-flex items-center justify-center text-white font-medium bg-white bg-opacity-20 group-hover:bg-opacity-30 rounded-lg shadow-sm group-hover:shadow-lg py-3 px-5 border border-white border-opacity-10 transform-gpu group-hover:-translate-y-0.5 transition-all duration-150">
<svg class="w-6 h-6 mr-2" 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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
Documentation</button>
</div>
<div class="inline-block">
<button type="button"
class="w-full sm:w-auto inline-flex items-center justify-center text-purple-900 group-hover:text-purple-500 font-medium leading-none bg-white rounded-lg shadow-sm group-hover:shadow-lg py-3 px-5 border border-transparent transform-gpu group-hover:-translate-y-0.5 transition-all duration-150">
<svg class="w-6 h-6 mr-2" 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="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
Get Figma File
</button>
</div>
</div>
</div>
</nav>
<div class="flex justify-start bg-white border-b-2 shadow-md">
<div class="flex-row w-full px-8">
<div class="rounded-lg">
<div class="flex flex-warp items-center mx-auto justify-start">
<div class="text-sm m-1 p-2 text-sm rounded lg:w-auto">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-700" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</div>
<input type="text"
class="m-1 p-3 w-full appearance-none border-none text-gray-700 text-base font-medium focus:outline-none focus:border-gray-200 focus:border-white focus:rounded focus:placeholder-transparent"
placeholder="Search All" aria-label="Search All">
</div>
</div>
</div>
</div>
</div>