Tabela comparativa

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-white py-20 px-6">
  <div class="max-w-4xl mx-auto overflow-x-auto">
    <table class="w-full text-sm border-collapse">
      <thead>
        <tr class="text-left border-b border-gray-200">
          <th class="py-4 font-semibold text-gray-900">Funcionalidade</th>
          <th class="py-4 font-semibold text-gray-900 text-center">Starter</th>
          <th class="py-4 font-semibold text-orange-600 text-center">Pro</th>
          <th class="py-4 font-semibold text-gray-900 text-center">Enterprise</th>
        </tr>
      </thead>
      <tbody class="text-gray-600">
        <tr class="border-b border-gray-100"><td class="py-3">Utilizadores</td><td class="text-center">1</td><td class="text-center font-semibold text-orange-600">10</td><td class="text-center">Ilimitados</td></tr>
        <tr class="border-b border-gray-100"><td class="py-3">Projectos</td><td class="text-center">5</td><td class="text-center font-semibold text-orange-600">Ilimitados</td><td class="text-center">Ilimitados</td></tr>
        <tr class="border-b border-gray-100"><td class="py-3">API access</td><td class="text-center">—</td><td class="text-center font-semibold text-orange-600">✓</td><td class="text-center">✓</td></tr>
        <tr><td class="py-3">Suporte</td><td class="text-center">Email</td><td class="text-center font-semibold text-orange-600">Prioritário</td><td class="text-center">Dedicado</td></tr>
      </tbody>
    </table>
  </div>
</section>