TailwindCSS responsive navbar with dropdown menu. Only with tailwindcss.

navbar.html

<nav class="flex items-center justify-between flex-wrap px-6 w-full bg-gray-200 text-gray-700 font-semibold">
    <div class="text-gray-800 mr-6">
        LOGO
    </div>
    <div class="block lg:hidden">
        <button
            class="flex items-center mt-3 px-3 py-2 border rounded border-gray-700 hover:text-gray-500 hover:border-gray-500">
            <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <title>Menu</title>
                <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
            </svg>
        </button>
    </div>
    <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
        <div class="text-sm lg:flex-grow">
            <a href="#"
                class="block lg:inline-block lg:w-32 lg:text-center p-4 lg:mt-0 bg-gray-200 hover:bg-gray-400">
                Home
            </a>
            <a href="#"
                class="block lg:inline-block lg:w-32 lg:text-center p-4 lg:mt-0 bg-gray-200 hover:bg-gray-400">
                Menu 1
            </a>
            <a href="#"
                class="block lg:inline-block lg:w-32 lg:text-center p-4 lg:mt-0 bg-gray-200 hover:bg-gray-400">
                Menu 2
            </a>
            <div class="group relative block lg:inline-block">
                <a href="#" class="p-4 lg:w-32 flex items-center hover:bg-gray-400">
                    <span class="mr-1 lg:min-w-7/12 lg:text-right">Dropdown</span>
                    <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                        <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path>
                    </svg>
                </a>
                <ul class="lg:absolute lg:hidden ml-5 pt-1 group-hover:block">
                    <a href="#"
                        class="block lg:inline-block lg:w-32 lg:text-center p-4 lg:mt-0 bg-gray-200 hover:bg-gray-400">
                        DD Menu 1
                    </a>
                    <a href="#"
                        class="block lg:inline-block lg:w-32 lg:text-center p-4 lg:mt-0 bg-gray-200 hover:bg-gray-400">
                        DD Menu 2
                    </a>
                    <a href="#"
                        class="block lg:inline-block lg:w-32 lg:text-center p-4 lg:mt-0 bg-gray-200 hover:bg-gray-400">
                        DD Menu 3
                    </a>
                </ul>
            </div>
        </div>
        <div>
            <a href="tel:contact[at]maz[dot]digital"
                class="inline-block text-sm px-4 py-2 leading-none border rounded text-gray-800 border-white hover:border-transparent hover:text-gray-800 hover:bg-white mt-4 lg:mt-0">
                Romain 'Maz' BILLOIR
            </a>
        </div>
    </div>
</nav>

tailwind.config.js

module.exports = {
    theme: {
      variants: {
        display: ['group-hover', 'responsive']
      }
    }
}

Don't forget to modify your tailwind.config.js.