Card de Preços Animado

Um cartão de preços único e moderno que é destacado ao passar o mouse e tem uma seção de preços animada. Isto é ideal quando você deseja destacar um plano específico, como na tela de seleção do plano de preços.

Visualização

Pro Plan

Ideal para projetos sérios e uso comercial.

¥4,980/ 月

projetos ilimitados作成
高度なanálise機能
24時間365日のSuporte prioritário
conexão de domínio personalizada

Casos de uso e recursos

Lista de preços de serviços e SaaS: adequada para destacar o plano mais recomendado ou o plano sobre o qual o usuário passou o mouse ao organizar vários planos.
Feedback visual: o cartão inteiro é levantado ao passar o mouse e uma linha colorida aparece na parte superior. Além disso, a seção de preços será ampliada para chamar a atenção do usuário para o preço.

Pontos-chave de design e UX (Design & UX)

Animação suave: Use transition-all duration-300 para alterar suavemente as sombras e a posição ao passar o mouse.
Ênfase no preço: Ao usar a classe group-hover:scale-110 origin-left, ao passar o mouse sobre o cartão inteiro, apenas a parte do preço será ligeiramente ampliada começando pela esquerda, tornando-o mais atraente.
Layout limpo: As margens (preenchimento) e a cor do texto (estilo Slate) são definidas adequadamente para criar um design moderno que facilita a leitura das informações.

Como personalizar (Guia de Personalização)

Alterar tema de cor: bg-gradient-to-r from-blue-500 to-indigo-500 ou botão hover color hover:bg-blue-600 para a cor da marca (por exemplo, from-emerald-500 to-teal-500 para cor verde) Você pode facilmente aplicar uma cor de tema alterando-a para hover:bg-emerald-600).
Ajuste de animação: Você pode alterar a altura flutuante alterando o valor de hover:-translate-y-2 ou ajustar a largura de expansão do preço definindo group-hover:scale-110 para 105, etc.

código de implementação (Implementation)

<div class="pricing-card relative w-full max-w-sm rounded-2xl bg-white border border-slate-200 p-8 shadow-sm transition-all duration-300 hover:shadow-xl hover:-translate-y-2 hover:border-blue-500 overflow-hidden group">
<!-- Background Accent Line -->
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-blue-500 to-indigo-500 opacity-0 transition-opacity duration-300 group-hover:opacity-100"></div>

<!-- Header -->
<div class="mb-6">
  <h3 class="text-xl font-bold text-slate-800 mb-2">Pro Plan</h3>
  <p class="text-sm text-slate-500">Ideal para projetos sérios e uso comercial.</p>
</div>

<!-- Price -->
<div class="mb-6 flex items-baseline">
  <span class="text-4xl font-extrabold text-slate-900 transition-transform duration-300 group-hover:scale-110 origin-left inline-block">¥4,980</span>
  <span class="text-slate-500 ml-2">/ 月</span>
</div>

<!-- Features -->
<ul class="space-y-4 mb-8">
  <li class="flex items-start">
    <svg class="w-5 h-5 text-blue-500 mt-0.5 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
    </svg>
    <span class="text-slate-600">projetos ilimitados作成</span>
  </li>
  <li class="flex items-start">
    <svg class="w-5 h-5 text-blue-500 mt-0.5 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
    </svg>
    <span class="text-slate-600">高度なanálise機能</span>
  </li>
  <li class="flex items-start">
    <svg class="w-5 h-5 text-blue-500 mt-0.5 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
    </svg>
    <span class="text-slate-600">24時間365日のSuporte prioritário</span>
  </li>
  <li class="flex items-start">
    <svg class="w-5 h-5 text-blue-500 mt-0.5 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
    </svg>
    <span class="text-slate-600">conexão de domínio personalizada</span>
  </li>
</ul>

<!-- CTA Button -->
<button class="w-full py-3 px-4 bg-slate-900 hover:bg-blue-600 text-white font-medium rounded-xl transition-colors duration-300 focus:ring-4 focus:ring-blue-100 focus:outline-none">
  Escolha um plano
</button>
</div>

Suporte ao navegador

Funciona bem com as versões mais recentes dos navegadores modernos (Chrome, Firefox, Safari, Edge).
Ele aproveita o recurso group-hover do Tailwind CSS, portanto, nenhum JavaScript especial é necessário.