Kartu Harga Animasi

Kartu harga tunggal modern yang disorot saat diarahkan dan memiliki bagian harga animasi. Ini ideal bila Anda ingin menyorot paket tertentu, seperti pada layar pemilihan paket harga.

Pratinjau

Pro Plan

Ideal untuk proyek serius dan penggunaan bisnis.

¥4,980/ 月

proyek tanpa batas作成
高度なanalitik機能
24時間365日のDukungan prioritas
koneksi domain khusus

Kasus & Fitur Penggunaan

SaaS dan daftar harga layanan: Cocok untuk menyorot paket yang paling direkomendasikan atau paket yang diarahkan pengguna saat mengatur beberapa paket.
Umpan Balik Visual: Seluruh kartu terangkat saat diarahkan dan garis aksen warna-warni muncul di bagian atas. Selain itu, bagian harga akan ditingkatkan untuk menarik perhatian pengguna terhadap harga.

Poin-poin penting dari desain dan UX (Desain & UX)

Animasi halus: Gunakan transition-all duration-300 untuk mengubah bayangan dan posisi saat melayang dengan lancar.
Penekanan harga: Dengan menggunakan kelas group-hover:scale-110 origin-left, saat Anda mengarahkan kursor ke seluruh kartu, hanya bagian harga yang akan sedikit diperbesar mulai dari kiri, sehingga lebih menarik perhatian.
Tata letak bersih: Margin (Padding) dan warna teks (gaya Slate) diatur dengan tepat untuk menciptakan desain modern yang membuat informasi mudah dibaca.

Cara menyesuaikan (Panduan Kustomisasi)

Ubah tema warna: bg-gradient-to-r from-blue-500 to-indigo-500 atau warna tombol hover hover:bg-blue-600 ke warna merek (misalnya from-emerald-500 to-teal-500 untuk warna hijau) Anda dapat dengan mudah menerapkan warna tema dengan mengubahnya menjadi hover:bg-emerald-600).
Penyesuaian animasi: Anda dapat mengubah ketinggian mengambang dengan mengubah nilai hover:-translate-y-2, atau menyempurnakan lebar perluasan harga dengan menyetel group-hover:scale-110 ke 105, dan seterusnya.

kode implementasi (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 untuk proyek serius dan penggunaan bisnis.</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">proyek tanpa batas作成</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">高度なanalitik機能</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日のDukungan prioritas</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">koneksi domain khusus</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">
  Pilih rencana
</button>
</div>

Dukungan Peramban

Bekerja dengan baik dengan versi terbaru browser modern (Chrome, Firefox, Safari, Edge).
Ini memanfaatkan fitur group-hover dari Tailwind CSS, jadi tidak diperlukan JavaScript khusus.