If you wish not to type tailwind  html with tailwind css classes on your own, here is the code for the next lecture:

navbar.html

<nav class="fixed flex items-center h-16 bg-gradient-to-r from-cyan-500 to-blue-700 mb-2 w-full z-10 text-white">
    <div class="flex justify-between w-full px-4 py-3">
        <div>
            logo
        </div>
        <div>
            avatar & menu
        </div>
    </div>
</nav>

sidebar.html

<aside class="hidden md:block sticky bg-slate-900 h-screen text-white w-full pt-24 text-sm">
    <ul>
        <li class="mb-6 mx-auto">
            <a href="" class="grid h-12 place-items-center cursor-pointer hover:text-slate-200 duration-300 text-slate-500">
                <i class="fa-solid fa-chart-pie fa-xl"></i>
                <p>dashboard</p>
            </a>
        </li>
        <li class="mb-6 mx-auto">
            <a href="" class="grid h-12 place-items-center cursor-pointer hover:text-slate-200 duration-300 text-slate-500">
                <i class="fa-solid fa-book fa-xl"></i>
                <p>books</p>
            </a>
        </li>
    </ul>
</aside>