Tabel Harga (Pricing Table)

Bagian Tabel Harga (Pricing Section) ini dirancang untuk menyajikan pilihan paket langganan secara jelas dan mudah dipahami, sangat relevan untuk platform SaaS maupun layanan berlangganan. Desainnya mencakup tiga opsi paket berbeda, dengan menyorot paket yang paling direkomendasikan (seperti paket Pro) sebagai daya tarik utama.

Pratinjau dan Kode Implementasi

Pricing

Paket terbaik untuk bisnis Anda

Uji coba gratis 14 hari tersedia pada semua paket. Batalkan kapan saja.

Basic

¥1,980/bulan

Ideal untuk proyek pribadi dan tim kecil.

1 Proyek
Dukungan Dasar
Penyimpanan 10GB

Paling Populer

Pro

¥4,980/bulan

Paket ideal untuk tim dan bisnis yang sedang berkembang.

Proyek Tak Terbatas
Dukungan Prioritas
Penyimpanan 100GB
Analitik Lanjutan

Enterprise

¥14,800/bulan

Disesuaikan untuk organisasi besar dan persyaratan lanjutan.

Semuanya Tak Terbatas
Dukungan Khusus 24/7
Penyimpanan Kustom
Jaminan SLA

<div class="bg-gray-50 py-16 px-4 sm:px-6 lg:px-8 font-sans">
  <div class="max-w-7xl mx-auto">
    <!-- Header -->
    <div class="text-center max-w-3xl mx-auto mb-16">
      <h2 class="text-base font-semibold text-blue-600 tracking-wide uppercase">Pricing</h2>
      <p class="mt-2 text-3xl font-extrabold text-gray-900 sm:text-4xl">
        Paket terbaik untuk bisnis Anda
      </p>
      <p class="mt-4 text-xl text-gray-500">
        Uji coba gratis 14 hari tersedia pada semua paket. Batalkan kapan saja.
      </p>
    </div>

    <!-- Pricing Cards Grid -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 items-center">
      
      <!-- Basic Plan -->
      <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8 hover:shadow-lg transition-shadow duration-300">
        <h3 class="text-xl font-semibold text-gray-900 mb-4">Basic</h3>
        <div class="flex items-baseline mb-6">
          <span class="text-4xl font-extrabold text-gray-900">¥1,980</span>
          <span class="text-gray-500 ml-2">/bulan</span>
        </div>
        <p class="text-gray-500 mb-8">Ideal untuk proyek pribadi dan tim kecil.</p>
        <ul class="space-y-4 mb-8">
          <li class="flex items-center text-gray-600">
            <svg class="w-5 h-5 text-green-500 mr-3" 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>
            1 Proyek
          </li>
          <li class="flex items-center text-gray-600">
            <svg class="w-5 h-5 text-green-500 mr-3" 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>
            Dukungan Dasar
          </li>
          <li class="flex items-center text-gray-600">
            <svg class="w-5 h-5 text-green-500 mr-3" 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>
            Penyimpanan 10GB
          </li>
        </ul>
        <button class="w-full py-3 px-4 bg-white text-blue-600 font-medium rounded-xl border-2 border-blue-600 hover:bg-blue-50 transition-colors duration-200">
          Mulai
        </button>
      </div>

      <!-- Pro Plan (Highlighted) -->
      <div class="bg-blue-600 rounded-2xl shadow-xl border border-blue-600 p-8 transform md:-translate-y-4 relative">
        <div class="absolute top-0 right-0 -mt-4 mr-4 bg-yellow-400 text-yellow-900 text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wide">
          Paling Populer
        </div>
        <h3 class="text-xl font-semibold text-white mb-4">Pro</h3>
        <div class="flex items-baseline mb-6">
          <span class="text-4xl font-extrabold text-white">¥4,980</span>
          <span class="text-blue-200 ml-2">/bulan</span>
        </div>
        <p class="text-blue-100 mb-8">Paket ideal untuk tim dan bisnis yang sedang berkembang.</p>
        <ul class="space-y-4 mb-8">
          <li class="flex items-center text-blue-100">
            <svg class="w-5 h-5 text-white mr-3" 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>
            Proyek Tak Terbatas
          </li>
          <li class="flex items-center text-blue-100">
            <svg class="w-5 h-5 text-white mr-3" 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>
            Dukungan Prioritas
          </li>
          <li class="flex items-center text-blue-100">
            <svg class="w-5 h-5 text-white mr-3" 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>
            Penyimpanan 100GB
          </li>
          <li class="flex items-center text-blue-100">
            <svg class="w-5 h-5 text-white mr-3" 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>
            Analitik Lanjutan
          </li>
        </ul>
        <button class="w-full py-3 px-4 bg-white text-blue-600 font-bold rounded-xl hover:bg-blue-50 hover:text-blue-700 transition-colors duration-200">
          Mulai Uji Coba Gratis
        </button>
      </div>

      <!-- Enterprise Plan -->
      <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8 hover:shadow-lg transition-shadow duration-300">
        <h3 class="text-xl font-semibold text-gray-900 mb-4">Enterprise</h3>
        <div class="flex items-baseline mb-6">
          <span class="text-4xl font-extrabold text-gray-900">¥14,800</span>
          <span class="text-gray-500 ml-2">/bulan</span>
        </div>
        <p class="text-gray-500 mb-8">Disesuaikan untuk organisasi besar dan persyaratan lanjutan.</p>
        <ul class="space-y-4 mb-8">
          <li class="flex items-center text-gray-600">
            <svg class="w-5 h-5 text-green-500 mr-3" 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>
            Semuanya Tak Terbatas
          </li>
          <li class="flex items-center text-gray-600">
            <svg class="w-5 h-5 text-green-500 mr-3" 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>
            Dukungan Khusus 24/7
          </li>
          <li class="flex items-center text-gray-600">
            <svg class="w-5 h-5 text-green-500 mr-3" 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>
            Penyimpanan Kustom
          </li>
          <li class="flex items-center text-gray-600">
            <svg class="w-5 h-5 text-green-500 mr-3" 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>
            Jaminan SLA
          </li>
        </ul>
        <button class="w-full py-3 px-4 bg-white text-gray-900 font-medium rounded-xl border-2 border-gray-200 hover:border-gray-300 hover:bg-gray-50 transition-colors duration-200">
          Hubungi Kami
        </button>
      </div>

    </div>
  </div>
</div>

Sorotan Implementasi

Penekanan Visual (Highlight): Pada kartu paket Pro (pilihan paling populer), penerapan warna latar belakang yang mencolok dan efek levitasi ringan (transform md:-translate-y-4) secara strategis akan mengarahkan fokus perhatian pengguna.
Tata Letak Responsif: Melalui pengaturan kelas grid-cols-1 md:grid-cols-3, tabel harga akan tertata rapi sebagai satu kolom vertikal pada perangkat seluler, dan berekspansi menjadi tiga kolom berdampingan pada layar berukuran tablet atau lebih besar.
Efek Hover Dinamis: Penambahan utilitas hover:shadow-lg transition-shadow duration-300 pada setiap kartu memberikan efek bayangan mulus saat kursor diarahkan, sehingga menciptakan nuansa interaksi yang responsif dan premium.
Aksesibilitas dan Keterbacaan: Kombinasi ikon indikator dan teks yang menggunakan skema warna dengan rasio kontras mumpuni menjamin informasi dapat tersampaikan dengan jelas secara visual.