Kit de botões e badges

Buttons & Badges — bloco Tailwind pronto a copiar.

Instalação

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

html

<section class="bg-white py-16 px-6">
  <div class="max-w-3xl mx-auto space-y-8">
    <div>
      <p class="text-xs font-semibold text-gray-400 mb-3 uppercase tracking-wide">Botões</p>
      <div class="flex flex-wrap gap-3 items-center">
        <button class="bg-gray-900 text-white font-semibold px-5 py-2.5 rounded-lg text-sm">Primário</button>
        <button class="border border-gray-300 text-gray-700 font-semibold px-5 py-2.5 rounded-lg text-sm">Secundário</button>
        <button class="bg-orange-500 text-white font-semibold px-5 py-2.5 rounded-lg text-sm">Coral</button>
        <button class="text-gray-600 font-semibold px-5 py-2.5 rounded-lg text-sm">Ghost</button>
        <button class="bg-red-500 text-white font-semibold px-5 py-2.5 rounded-lg text-sm">Destrutivo</button>
        <button class="bg-gray-100 text-gray-400 font-semibold px-5 py-2.5 rounded-lg text-sm cursor-not-allowed" disabled>Desativado</button>
      </div>
    </div>
    <div>
      <p class="text-xs font-semibold text-gray-400 mb-3 uppercase tracking-wide">Badges</p>
      <div class="flex flex-wrap gap-2 items-center">
        <span class="bg-green-100 text-green-700 text-xs font-semibold px-3 py-1 rounded-full">Activo</span>
        <span class="bg-yellow-100 text-yellow-700 text-xs font-semibold px-3 py-1 rounded-full">Pendente</span>
        <span class="bg-red-100 text-red-700 text-xs font-semibold px-3 py-1 rounded-full">Erro</span>
        <span class="bg-orange-100 text-orange-700 text-xs font-semibold px-3 py-1 rounded-full">Novo</span>
        <span class="bg-gray-100 text-gray-600 text-xs font-semibold px-3 py-1 rounded-full">Rascunho</span>
      </div>
    </div>
  </div>
</section>