internal-header.js

document.getElementById('header').innerHTML =
`<div>
<div class="flex justify-center "  style=" z-index: 99;">
    <nav class="self-center fixed top-0 w-full max-w-7xl " style="background-color: rgb(61, 66, 70);">
        <div class="flex justify-between items-center text-white" style="z-index:999;">
            <h1 class="uppercase pl-5 py-4 text-lg font-sans font-bold"><a href="../index.html" style="color: white;">Javascript Projects</a></h1>
            <ul class="hidden md:flex items-center text-[18px] font-semibold pl-32">
                <li class="hover:underline underline-offset-4 decoration-2 decoration-white py-2 rounded-lg px-5"><a
                        href="../index.html">Home</a></li>
                <li class="hover:underline underline-offset-4 decoration-2 decoration-white py-2 rounded-lg px-5"><a
                        href="../index.html">Contact</a></li>
                <li class="hover:underline underline-offset-4 decoration-2 decoration-white py-2 rounded-lg px-5"><a
                        href="#">Services</a></li>
                <li class="hover:underline underline-offset-4 decoration-2 decoration-white py-2 rounded-lg px-5"><a
                        href="#">About</a></li>
                <li class="hover:underline underline-offset-4 decoration-2 decoration-white py-2 rounded-lg px-5"><a
                        href="#">Pricing</a></li>
            </ul>
            <div class="text-white text-center text-base pr-5 hidden lg:inline-flex"> <a href="https://twitter.com/djnitish97"
                    class="w-8 h-8 inline-block rounded-full pt-[6px] hover:text-blue-500"><i
                        class="fa fa-twitter"></i></a> <a href="https://www.instagram.com/nitish_khobragade/"
                    class="w-8 h-8 inline-block rounded-full pt-[5px] hover:text-blue-500"><i
                        class="fa fa-instagram"></i></a> <a href="#"
                    class="w-8 h-8 inline-block rounded-full pt-[5px] hover:text-blue-500"><i
                        class="fa fa-facebook"></i></a> <a href="https://github.com/nitishkhobragade"
                    class="w-8 h-8 inline-block rounded-full pt-[5px] hover:text-blue-500"><i
                        class="fa fa-github"></i></a> <a href="https://in.linkedin.com/in/nitishkhobragade"
                    class="w-8 h-8 inline-block rounded-full pt-[5px] hover:text-blue-500"><i
                        class="fa fa-linkedin"></i></a> </div> <button
                class="block p-3 mx-10 md:hidden hover:bg-black rounded-xl group">
                <div class="w-5 my-[3px] h-[3px] bg-white mb-[2px]"></div>
                <div class="w-5 my-[3px] h-[3px] bg-white mb-[2px]"></div>
                <div class="w-5 my-[3px] h-[3px] bg-white"></div>
                <div
                    class="absolute top-0 -right-full opacity-0 h-screen w-[60%] border bg-black group-focus:right-0 group-focus:opacity-100 transition-all ease-in duration-300 " style="background-color: rgb(61, 66, 70);">
                    <ul class="flex flex-col items-center text-[18px] pt-[60px]">
                        <li class="hover:border border-white py-4 px-6 w-full"><a href="../index.html">Home</a></li>
                        <li class="hover:border border-white py-4 px-6 w-full"><a href="../index.html">Contacts</a></li>
                        <li class="hover:border border-white py-4 px-6 w-full"><a href="#">Services</a></li>
                        <li class="hover:border border-white py-4 px-6 w-full"><a href="../index.html">About</a></li>
                        <li class="hover:border border-white py-4 px-6 w-full"><a href="#">Pricing</a></li>
                    </ul>
                </div>
            </button>
        </div>
    </nav>
    </div>
    <script src="https://use.fontawesome.com/03f8a0ebd4.js"></script> 
</div>`