nav.html

<nav class="list-reset flex flex-col lg:flex-row items-center">
    <ul class="list-reset flex flex-col lg:flex-row mx-6">
        <li class="active border border-white rounded text-blue py-2 px-3 text-center align-content-center">
            <a href="/" class="text-slate text-right">Home</a>
        </li>
        <li class="border border-white rounded text-blue py-2 px-3 text-center align-content-center">
            <a href="/newsletter" class="text-slate">Newsletter</a>
        </li>
        <li class="border border-white rounded text-blue py-2 px-3 text-center align-content-center">
            <a href="/talks" class="text-slate text-right">Talks</a>
        </li>
        <li class="border border-white rounded text-blue py-2 px-3 text-center align-content-center">
            <a href="/advertising" class="text-slate text-right">Advertising</a>
        </li>
    </ul>
    <div>
        <input placeholder="Search blogposts" type="text">
    </div>
</nav>