Creando la navbar

Código de mi navbar junto con la sección home:

    <nav class="w-full h-14 hidden bg-white lg:flex p-4 justify-between">
        <div class="h-auto w-auto">
            <p class="text-xl text-primary font-black">Platzi Travel</p>
        </div>
        <div class="flex space-x-8">
            <a class="font-bold text-base text-primary" href="#home">Inicio</a>
            <a class="font-bold text-base text-primary" href="#recomendados">Recomendados</a>
            <a class="font-bold text-base text-primary" href="#rentas_destacadas">Rentas</a>
            <a class="font-bold text-base text-primary" href="#faqs">FAQs</a>
            <a class="font-bold text-base text-primary" href="#sobre_nosotros">Sobre nosotros</a>
        </div>
        <div class="flex space-x-4">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="https://www.w3.org/2000/svg"><path class="fill-current text-primary" fill-rule="evenodd" clip-rule="evenodd" d="M8 3.99997C6.93913 3.99997 5.92172 4.4214 5.17157 5.17155C4.42143 5.92169 4 6.93911 4 7.99997C4 9.06084 4.42143 10.0783 5.17157 10.8284C5.92172 11.5785 6.93913 12 8 12C9.06087 12 10.0783 11.5785 10.8284 10.8284C11.5786 10.0783 12 9.06084 12 7.99997C12 6.93911 11.5786 5.92169 10.8284 5.17155C10.0783 4.4214 9.06087 3.99997 8 3.99997ZM2 7.99997C1.99988 7.05568 2.22264 6.12468 2.65017 5.28271C3.0777 4.44074 3.69792 3.71157 4.4604 3.1545C5.22287 2.59743 6.10606 2.22819 7.03815 2.07681C7.97023 1.92543 8.92488 1.99618 9.82446 2.28332C10.724 2.57046 11.5432 3.06587 12.2152 3.72927C12.8872 4.39266 13.3931 5.20531 13.6919 6.10111C13.9906 6.9969 14.0737 7.95056 13.9343 8.88452C13.795 9.81848 13.4372 10.7064 12.89 11.476L17.707 16.293C17.8892 16.4816 17.99 16.7342 17.9877 16.9964C17.9854 17.2586 17.8802 17.5094 17.6948 17.6948C17.5094 17.8802 17.2586 17.9854 16.9964 17.9876C16.7342 17.9899 16.4816 17.8891 16.293 17.707L11.477 12.891C10.5794 13.5293 9.52335 13.9081 8.42468 13.9861C7.326 14.0641 6.22707 13.8381 5.2483 13.3329C4.26953 12.8278 3.44869 12.063 2.87572 11.1223C2.30276 10.1816 1.99979 9.10141 2 7.99997Z" fill="#3F3F46"/></svg>
            <svg width="20" height="20" viewBox="0 0 29 29" fill="none" xmlns="https://www.w3.org/2000/svg"><path d="M25.0748 19.2748C22.9267 20.2465 20.5334 20.5405 18.214 20.1177C15.8945 19.6949 13.7589 18.5753 12.0918 16.9082C10.4246 15.241 9.30509 13.1055 8.88228 10.786C8.45946 8.46654 8.75347 6.0733 9.72512 3.92514C8.01494 4.69801 6.51777 5.87422 5.36208 7.35288C4.20638 8.83154 3.42666 10.5685 3.08979 12.4147C2.75293 14.261 2.86898 16.1614 3.428 17.9529C3.98702 19.7444 4.97232 21.3736 6.29935 22.7006C7.62639 24.0276 9.25556 25.0129 11.0471 25.572C12.8386 26.131 14.739 26.247 16.5852 25.9102C18.4315 25.5733 20.1684 24.7936 21.6471 23.6379C23.1257 22.4822 24.302 20.985 25.0748 19.2748V19.2748Z" fill="#CC2D4A"/></svg>
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="https://www.w3.org/2000/svg"><path class="fill-current text-gray-300" fill-rule="evenodd" clip-rule="evenodd" d="M10 9C10.7956 9 11.5587 8.68393 12.1213 8.12132C12.6839 7.55871 13 6.79565 13 6C13 5.20435 12.6839 4.44129 12.1213 3.87868C11.5587 3.31607 10.7956 3 10 3C9.20435 3 8.44129 3.31607 7.87868 3.87868C7.31607 4.44129 7 5.20435 7 6C7 6.79565 7.31607 7.55871 7.87868 8.12132C8.44129 8.68393 9.20435 9 10 9ZM3 18C3 17.0807 3.18106 16.1705 3.53284 15.3212C3.88463 14.4719 4.40024 13.7003 5.05025 13.0503C5.70026 12.4002 6.47194 11.8846 7.32122 11.5328C8.1705 11.1811 9.08075 11 10 11C10.9193 11 11.8295 11.1811 12.6788 11.5328C13.5281 11.8846 14.2997 12.4002 14.9497 13.0503C15.5998 13.7003 16.1154 14.4719 16.4672 15.3212C16.8189 16.1705 17 17.0807 17 18H3Z" fill="#3F3F46"/></svg>
        </div>
    </nav>
    
    <section class="w-full lg:h-screen">
        <div class="lg:w-full lg:h-3/4" id="home">
            <div class="w-full lg:h-full">
                <div class="w-full h-full flex flex-col absolute space-y-96 py-4 items-center lg:space-y-0 lg:items-start lg:pt-48 lg:justify-start">
                    <input type="search" class="outline-none p-3 rounded-full shadow-sm transition duration-300 focus-within:shadow-sm focus:ring-2 focus:w-11/12 lg:hidden" placeholder="San Francisco" name="" id="">
                    <div class="hidden h-auto lg:w-2/5 lg:flex pb-6">
                        <p class="text-4xl ml-16 font-bold text-black">Encuentra más ubicaciones como esta</p>
                    </div>
                    <button class="w-48 rounded-full text-lg text-primary shadow-sm font-semibold p-4 bg-white transition transition-all duration-500 ease-in-out hover:bg-primary hover:text-white transform hover:-translate-y-1 hover:scale-110 lg:ml-16">Explorar</button>
                </div>
                <div class="w-full h-full lg:h-full lg:bg-sanFranciscoDesktop lg:bg-cover lg:bg-center">
                    <img class="lg:hidden" src="./img/sanFrancisco.jpg" alt="San Francisco City">
                </div>
            </div>
        </div>

Si utilizaste fontawesome, aqui esta el navbar listico 😄

        <nav class="w-full h-14 hidden bg-white lg:flex lg:fixed lg:z-10 p-4 justify-between border-b-4 border-cyan-600">
            <div class="h-auto w-auto">
                <p class="text-xl text-primary font-black">Platzi Travel</p>
            </div>

            <div class="flex space-x-8">
                <a class="nav-items" href="#home">Inicio</a>
                <a class="nav-items" href="#recomendadas">Recomendados</a>
                <a class="nav-items" href="#rentas_destacadas">Rentas</a>
                <a class="nav-items" href="#faqs">FAQs</a>
                <a class="nav-items" href="#sobre_nosotros">Sobre nosotros</a>
            </div>
            <div class="flex space-x-4">
                <a href="">
                    <i class="nav-icons fa-search fa-solid"></i>
                </a>
                <a href="">
                    <i class="nav-icons fa-moon fa-solid"></i>
                </a>
                <a href="./registrationForm.html">
                    <i class="nav-icons fa-user fa-solid"></i>
                </a>
            </div>
        </nav>

la clases son

    .nav-items {
        @apply font-bold text-base text-primary
    }

    .nav-icons{
        @apply text-base text-primary
    }

Uy el navbar con fixed da problemas 😦

A mi por alguna razón no me toma el h-3/5 si le pongo h-96 funcioan sin problema

😞

No me salió agrandar la imagen del cover y el navbar con fixed está triste.

Excelente clase, aprendí nuevas cosas con los id’s, gracias