Анимированная карточка тарифа

Современная единая карточка цен, которая выделяется при наведении курсора и имеет анимированный раздел цен. Это идеально, если вы хотите выделить конкретный план, например, на экране выбора ценового плана.

Предварительный просмотр

Pro Plan

Идеально подходит для серьезных проектов и делового использования.

₽4 980/ мес.

Неограниченное создание проектов
Расширенная аналитика
Приоритетная поддержка 24/7
подключение к пользовательскому домену

Варианты использования и возможности

Прейскурант SaaS и услуг: подходит для выделения наиболее рекомендуемого плана или плана, на который пользователь навел курсор при организации нескольких планов.
Визуальная обратная связь: при наведении курсора вся карточка поднимается, и вверху появляется красочная акцентная линия. Кроме того, раздел цен будет увеличен, чтобы привлечь внимание пользователя к цене.

##Ключевые моменты дизайна и UX (Design & UX)

Плавная анимация: используйте параметр «transition-all period-300», чтобы плавно менять тени и положение при наведении курсора мыши.
Акцент на цене: при использовании класса group-hover:scale-110 origin-left при наведении курсора на всю карточку только часть цены будет немного увеличена, начиная слева, что делает ее более привлекательной.
Чистый макет: поля (отступы) и цвет текста (стиль Slate) настроены соответствующим образом, чтобы создать современный дизайн, облегчающий чтение информации.

Как настроить (Руководство по настройке)

Измените цветовую тему: bg-gradient-to-r from-blue-500 to-indigo-500 или цвет кнопки при наведении hover:bg-blue-600 на фирменный цвет (например, from-emerald-500 to-teal-500 для зеленого цвета). Вы можете легко применить цвет темы, изменив его на hover:bg-emerald-600).
Настройка анимации: вы можете изменить плавающую высоту, изменив значение hover:-translate-y-2, или точно настроить ширину раскрытия цены, установив для group-hover:scale-110 значение 105 и т. д.

код реализации (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">Идеально подходит для серьезных проектов и делового использования.</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">Неограниченное создание проектов</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">Расширенная аналитика</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/7</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">подключение к пользовательскому домену</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">
  Выберите план
</button>
</div>

Поддержка браузера

Хорошо работает с последними версиями современных браузеров (Chrome,