logo Template.Vault

search

CTRL+K or '/'

Contact

Components

headers - Template.Vault

Discover a variety of sleek, responsive header components powered by Tailwind CSS. Perfect for enhancing navigation and hero sections, these headers are fully customizable and easy to integrate into any website project.

Discover a variety of sleek, responsive header components powered by Tailwind CSS. Perfect for enhancing navigation and hero sections, these headers are fully customizable and easy to integrate into any website project.

Default header

A clean, responsive default header component built with Tailwind CSS, featuring a logo, navigation menu, and a call-to-action button. Perfect for any modern website.

See on Github
Template.vault
HTML

  <header class="dark:bg-[#212121a4] bg-[#eaeaea] border border-[#c1c1c1] text-white p-2 w-full rounded-[40px]">
    <div class="max-w-7xl mx-auto pl-3">
        <div class="flex justify-between items-center">            
            <div class="text-2xl dark:text-white text-black font-bold">Template.vault</div>
            <nav >
                <div class="flex space-x-4">
                    <a href="#" class="hover:text-yellow-500 no-underline">Home</a>
                    <a href="#" class="hover:text-yellow-500 no-underline">About</a>
                    <a href="#" class="hover:text-yellow-500 no-underline">Services</a>
                    <a href="#" class="hover:text-yellow-500 no-underline">Contact</a>
                </div>
            </nav>
            <button class="bg-yellow-500 text-black px-4 py-2 rounded-[30px] hover:bg-yellow-400">Get Started</button>
        </div>
    </div>
</header>

Square rounded header

A header with crisp, defined edges that conveys a modern and clean aesthetic. The layout includes a welcome note and social icons, creating a structured, professional look without rounded corners.

See on Github
TerraQuest
Book Services Contact
HTML

    <header class="bg-[#fff] mx-auto px-10 py-5 max-w-screen-2xl w-[90%] sticky top-0">
        <div class="max-w-7xl mx-auto px-0 w-full flex justify-between items-center">
            <a href="/" class="font-extrabold no-underline text-xl text-[#a2c617]">TerraQuest</a>
            <div class="flex justify-center gap-10">
                <a href="/" class="no-underline text-black">Book</a>              
                <a href="/" class="no-underline text-black">Services</a>
                <a href="/" class="no-underline text-black">Contact</a>
            </div>
            <div class="flex justify-center gap-5 items-center">                
                <div class="bg-[#EFEFEF] px-1 py-1 pr-2 rounded-3xl flex items-center gap-1.5">
                    <button class="bg-[#a2c617] rounded-2xl px-3 py-1 text-black">Login</button>                 
                    <svg stroke="currentColor" fill="currentColor" strokeWidth="0" viewBox="0 0 512 512" class="fill-[#292929]" height="20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M128 192l128 128 128-128z"></path></svg>
                </div>
            </div>
        </div>  
    </header>

Header with social links

A welcoming header featuring a friendly greeting alongside social media icons, providing easy access to connect and stay updated, while creating a warm, inviting first impression for visitors. Feel free to change the colors and urls according to you and web-theme.

See on Github

Welcome to the TerraQuest, your travel partner

TerraQuest
Book About Services
HTML

        <div class="top-0 left-0 w-full px-10 py-4 pb-14 bg-[#d5d5d5] flex justify-between items-center relative z-0">
            <div ><p class="text-[#272725] !mb-0">Welcome to the TerraQuest, your travel partner</p></div>
            <div class="flex gap-4">
                <a href="https://www.instagram.com/yashu024/" target="_blank">
                <svg stroke="#272725" fill="#272725" strokeWidth="0" viewBox="0 0 24 24" height="19" width="19" xmlns="http://www.w3.org/2000/svg"><path d="M13.0281 2.00073C14.1535 2.00259 14.7238 2.00855 15.2166 2.02322L15.4107 2.02956C15.6349 2.03753 15.8561 2.04753 16.1228 2.06003C17.1869 2.1092 17.9128 2.27753 18.5503 2.52503C19.2094 2.7792 19.7661 3.12253 20.3219 3.67837C20.8769 4.2342 21.2203 4.79253 21.4753 5.45003C21.7219 6.0867 21.8903 6.81337 21.9403 7.87753C21.9522 8.1442 21.9618 8.3654 21.9697 8.58964L21.976 8.78373C21.9906 9.27647 21.9973 9.84686 21.9994 10.9723L22.0002 11.7179C22.0003 11.809 22.0003 11.903 22.0003 12L22.0002 12.2821L21.9996 13.0278C21.9977 14.1532 21.9918 14.7236 21.9771 15.2163L21.9707 15.4104C21.9628 15.6347 21.9528 15.8559 21.9403 16.1225C21.8911 17.1867 21.7219 17.9125 21.4753 18.55C21.2211 19.2092 20.8769 19.7659 20.3219 20.3217C19.7661 20.8767 19.2069 21.22 18.5503 21.475C17.9128 21.7217 17.1869 21.89 16.1228 21.94C15.8561 21.9519 15.6349 21.9616 15.4107 21.9694L15.2166 21.9757C14.7238 21.9904 14.1535 21.997 13.0281 21.9992L12.2824 22C12.1913 22 12.0973 22 12.0003 22L11.7182 22L10.9725 21.9993C9.8471 21.9975 9.27672 21.9915 8.78397 21.9768L8.58989 21.9705C8.36564 21.9625 8.14444 21.9525 7.87778 21.94C6.81361 21.8909 6.08861 21.7217 5.45028 21.475C4.79194 21.2209 4.23444 20.8767 3.67861 20.3217C3.12278 19.7659 2.78028 19.2067 2.52528 18.55C2.27778 17.9125 2.11028 17.1867 2.06028 16.1225C2.0484 15.8559 2.03871 15.6347 2.03086 15.4104L2.02457 15.2163C2.00994 14.7236 2.00327 14.1532 2.00111 13.0278L2.00098 10.9723C2.00284 9.84686 2.00879 9.27647 2.02346 8.78373L2.02981 8.58964C2.03778 8.3654 2.04778 8.1442 2.06028 7.87753C2.10944 6.81253 2.27778 6.08753 2.52528 5.45003C2.77944 4.7917 3.12278 4.2342 3.67861 3.67837C4.23444 3.12253 4.79278 2.78003 5.45028 2.52503C6.08778 2.27753 6.81278 2.11003 7.87778 2.06003C8.14444 2.04816 8.36564 2.03847 8.58989 2.03062L8.78397 2.02433C9.27672 2.00969 9.8471 2.00302 10.9725 2.00086L13.0281 2.00073ZM12.0003 7.00003C9.23738 7.00003 7.00028 9.23956 7.00028 12C7.00028 14.7629 9.23981 17 12.0003 17C14.7632 17 17.0003 14.7605 17.0003 12C17.0003 9.23713 14.7607 7.00003 12.0003 7.00003ZM12.0003 9.00003C13.6572 9.00003 15.0003 10.3427 15.0003 12C15.0003 13.6569 13.6576 15 12.0003 15C10.3434 15 9.00028 13.6574 9.00028 12C9.00028 10.3431 10.3429 9.00003 12.0003 9.00003ZM17.2503 5.50003C16.561 5.50003 16.0003 6.05994 16.0003 6.74918C16.0003 7.43843 16.5602 7.9992 17.2503 7.9992C17.9395 7.9992 18.5003 7.4393 18.5003 6.74918C18.5003 6.05994 17.9386 5.49917 17.2503 5.50003Z"></path></svg>
                </a>
                <a href="#" target="_blank">
                <svg stroke="#272725" fill="#272725" strokeWidth="0" viewBox="0 0 512 512" height="19" width="19" xmlns="http://www.w3.org/2000/svg"><path d="M260.062 32C138.605 32 40.134 129.701 40.134 250.232c0 41.23 11.532 79.79 31.559 112.687L32 480l121.764-38.682c31.508 17.285 67.745 27.146 106.298 27.146C381.535 468.464 480 370.749 480 250.232 480 129.701 381.535 32 260.062 32zm109.362 301.11c-5.174 12.827-28.574 24.533-38.899 25.072-10.314.547-10.608 7.994-66.84-16.434-56.225-24.434-90.052-83.844-92.719-87.67-2.669-3.812-21.78-31.047-20.749-58.455 1.038-27.413 16.047-40.346 21.404-45.725 5.351-5.387 11.486-6.352 15.232-6.413 4.428-.072 7.296-.132 10.573-.011 3.274.124 8.192-.685 12.45 10.639 4.256 11.323 14.443 39.153 15.746 41.989 1.302 2.839 2.108 6.126.102 9.771-2.012 3.653-3.042 5.935-5.961 9.083-2.935 3.148-6.174 7.042-8.792 9.449-2.92 2.665-5.97 5.572-2.9 11.269 3.068 5.693 13.653 24.356 29.779 39.736 20.725 19.771 38.598 26.329 44.098 29.317 5.515 3.004 8.806 2.67 12.226-.929 3.404-3.599 14.639-15.746 18.596-21.169 3.955-5.438 7.661-4.373 12.742-2.329 5.078 2.052 32.157 16.556 37.673 19.551 5.51 2.989 9.193 4.529 10.51 6.9 1.317 2.38.901 13.531-4.271 26.359z"></path></svg>
                </a> 
                <a href="#" target="_blank">
                <svg stroke="#272725" fill="#272725" strokeWidth="0" viewBox="0 0 576 512" height="19" width="19" xmlns="http://www.w3.org/2000/svg"><path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path></svg>
                </a>
                <a href="#" target="_blank">
                <svg stroke="#272725" fill="#272725" strokeWidth="0" viewBox="0 0 512 512" height="19" width="19" xmlns="http://www.w3.org/2000/svg"><path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"></path></svg>
                </a>
            </div>
        </div>
        <header class="bg-[#fff] mx-auto px-10 py-5 max-w-screen-2xl w-[90%] sticky top-0 -mt-10">
            <div class="max-w-7xl mx-auto px-0 w-full flex justify-between items-center">
                <a href="/" class="font-extrabold text-xl text-[#a2c617] no-underline">TerraQuest</a>
                <div class="flex justify-center gap-10">
                    <a href="/" class="no-underline text-[#272725]">Book</a>                    
                    <a href="/" class="no-underline text-[#272725]">About</a>
                    <a href="/" class="no-underline text-[#272725]">Services</a>                    
                </div>
                <div class="flex justify-center gap-5 items-center">                   
                    <div class="bg-[#EFEFEF] px-1 py-1 pr-2 rounded-3xl flex items-center gap-1.5">
                        <button class="bg-[#a2c617] rounded-2xl px-3 py-0.5">Login</button>                 
                        <svg stroke="currentColor" fill="currentColor" strokeWidth="0" viewBox="0 0 512 512" class="fill-[#292929]" height="20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M128 192l128 128 128-128z"></path></svg>
                    </div>
                </div>
            </div>  
        </header>