workshop-tailwind-css/templates/includes/navbar.html.twig

<div class="sticky top-0 z-30 px-4 mx-auto bg-white max-w-screen-2xl">
    <div class="grid h-full grid-cols-2 gap-4">
        <div>
            <a class="absolute" href="#0">
                <img class="relative z-20 w-auto h-20 md:h-24" src="https://www.fldrupal.camp/sites/all/themes/fldc17/images/header-logo-general.svg">
            </a>
        </div>
        <div class="flex items-center justify-end h-full">
            <button class="my-4 lg:hidden" type="button" aria-label="Toggle menu">
                <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                </svg>
            </button>

            <ul class="justify-end hidden h-full md:flex">
                {% for menu_item in menu_items.findAll() %}
                    {% set linkClasses = [
                        'block px-2 py-3 text-2xl uppercase duration-200 ease-out transition-color font-display text-blue-dark hover:bg-orange focus:bg-orange hover:text-gray-dark focus:text-gray-dark',
                        menu_item.is_active ? 'text-white bg-blue'
                    ] %}
                    <li>
                        <a class="{{ linkClasses|join(' ')|trim }}" href="#0">
                            {{ menu_item.title }}
                        </a>
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>
</div>