Toggle mensal/anual (visual)

Pricing — 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-gray-50 py-20 px-6">
  <div class="max-w-3xl mx-auto text-center">
    <h2 class="text-3xl font-bold mb-6">Poupe 20% no plano anual</h2>
    <div class="inline-flex bg-white border border-gray-200 rounded-full p-1 mb-10">
      <span class="px-5 py-2 rounded-full bg-gray-900 text-white text-sm font-semibold">Mensal</span>
      <span class="px-5 py-2 rounded-full text-sm font-semibold text-gray-500">Anual</span>
    </div>
    <div class="grid md:grid-cols-2 gap-6 text-left">
      <div class="bg-white p-8 rounded-2xl border border-gray-200">
        <h3 class="font-semibold mb-1">Individual</h3>
        <div class="text-3xl font-bold my-4">€12<span class="text-base font-normal text-gray-400">/mês</span></div>
        <a href="#" class="block text-center border border-gray-300 rounded-lg py-2.5 font-semibold">Escolher</a>
      </div>
      <div class="bg-gray-900 text-white p-8 rounded-2xl">
        <h3 class="font-semibold mb-1">Equipa</h3>
        <div class="text-3xl font-bold my-4">€39<span class="text-base font-normal text-gray-400">/mês</span></div>
        <a href="#" class="block text-center bg-white text-gray-900 rounded-lg py-2.5 font-semibold">Escolher</a>
      </div>
    </div>
  </div>
</section>