Navbar com dropdown

Navbar — bloco Tailwind pronto a copiar.

Instalação

Bloco em HTML + Tailwind — sem dependências de build. Copie e cole diretamente no seu projeto.

html

<nav class="bg-white shadow-sm">
  <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
    <a href="#" class="text-xl font-bold">Flow<span class="text-orange-500">HQ</span></a>
    <div class="hidden md:flex items-center gap-6 text-sm font-medium text-gray-600 relative">
      <div class="group relative">
        <button class="flex items-center gap-1 hover:text-gray-900">Soluções
          <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
        </button>
        <div class="absolute hidden group-hover:block top-full left-0 mt-2 w-56 bg-white border border-gray-100 rounded-xl shadow-lg p-2">
          <a href="#" class="block px-3 py-2 rounded-lg hover:bg-gray-50 text-sm">Para startups</a>
          <a href="#" class="block px-3 py-2 rounded-lg hover:bg-gray-50 text-sm">Para empresas</a>
          <a href="#" class="block px-3 py-2 rounded-lg hover:bg-gray-50 text-sm">Para agências</a>
        </div>
      </div>
      <a href="#" class="hover:text-gray-900">Preços</a>
      <a href="#" class="hover:text-gray-900">Blog</a>
    </div>
    <a href="#" class="bg-orange-500 text-white text-sm font-semibold px-4 py-2 rounded-lg hover:bg-orange-600">Marcar demo</a>
  </div>
</nav>