Bahagian Jadual Harga
Bina jadual harga tiga lajur dengan pelan disyorkan yang diserlahkan, senarai ciri dan CTA pembelian menggunakan utiliti grid serta sempadan.
Bahagian Jadual Harga ialah pelajaran Tailwind CSS Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Tailwind CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.
Gambaran Keseluruhan Reka Letak Bahagian Harga
Bahagian harga sering menjadi bahagian paling penting untuk penukaran dalam halaman pendaratan. Corak klasik memaparkan dua atau tiga tahap bersebelahan dalam grid, dengan satu tahap diserlahkan sebagai pelan disyorkan. Bahagian ini bermula dengan tajuk dan togol tahunan/bulanan pilihan. Gunakan bg-white px-4 py-24 untuk bekas bahagian dan pengepala yang ditengahkan di atas grid pelan.
<section class="bg-white px-4 py-24">
<div class="mx-auto max-w-7xl">
<!-- Section header -->
<div class="mb-16 text-center">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 md:text-4xl">
Simple, transparent pricing
</h2>
<p class="mt-4 text-lg text-gray-500">No hidden fees. Cancel anytime.</p>
</div>
<!-- Pricing cards grid -->
</div>
</section>Grid Harga Tiga Lajur
Gunakan grid tiga lajur untuk memaparkan tahap Permulaan, Pro dan Perusahaan. Pada peranti mudah alih, kad disusun secara menegak. Gunakan grid grid-cols-1 gap-8 lg:grid-cols-3. Kad tengah (pelan disyorkan) boleh ditonjolkan secara visual dengan latar gelap atau berwarna, bingkai atau bayang yang lebih besar. Pastikan item grid berkongsi ketinggian baris yang sama supaya sejajar apabila dipaparkan bersebelahan.
<div class="grid grid-cols-1 gap-8 lg:grid-cols-3">
<!-- Starter tier -->
<div class="rounded-2xl border border-gray-200 p-8">
<!-- Plan content -->
</div>
<!-- Recommended (Pro) tier -->
<div class="rounded-2xl bg-blue-600 p-8 text-white shadow-xl">
<!-- Plan content -->
</div>
<!-- Enterprise tier -->
<div class="rounded-2xl border border-gray-200 p-8">
<!-- Plan content -->
</div>
</div>Pengepala Kad Harga
Pengepala setiap kad harga merangkumi nama pelan, huraian ringkas dan harga berserta tempoh pengebilan. Harga hendaklah paling menonjol secara visual — gunakan text-5xl font-extrabold untuk jumlah dan text-sm yang lebih kecil untuk tempoh. Bagi kad yang disyorkan, tambahkan lencana Paling Popular dalam warna aksen di atas nama pelan.
<div class="rounded-2xl bg-blue-600 p-8 text-white shadow-xl">
<!-- Badge -->
<span class="inline-block rounded-full bg-blue-400/30 px-3 py-1
text-xs font-semibold uppercase tracking-widest">
Most Popular
</span>
<!-- Plan name -->
<h3 class="mt-4 text-xl font-bold">Pro</h3>
<p class="mt-1 text-sm text-blue-200">For growing teams and products.</p>
<!-- Price -->
<div class="mt-6 flex items-baseline gap-1">
<span class="text-5xl font-extrabold">$49</span>
<span class="text-sm text-blue-200">/month</span>
</div>
</div>Senarai Ciri dalam Kad Harga
Di bawah harga, senaraikan ciri yang termasuk dalam pelan menggunakan senarai tidak tersusun dengan ikon tanda semak. Gunakan mt-8 space-y-3 pada senarai dan gayakan setiap item sebagai baris lentur dengan ikon tanda semak di sebelah kiri. Tanda semak hijau menandakan ciri disertakan; item kelabu atau bertanda silang menunjukkan ciri yang tiada dalam tahap lebih rendah. Pastikan senarai ringkas — maksimum lima hingga lapan item.
<ul class="mt-8 space-y-3">
<li class="flex items-center gap-3 text-sm">
<svg class="h-5 w-5 flex-shrink-0 text-blue-200" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"/>
</svg>
Unlimited projects
</li>
<li class="flex items-center gap-3 text-sm">
<svg class="h-5 w-5 flex-shrink-0 text-blue-200" fill="currentColor" viewBox="0 0 20 20">
<!-- checkmark path -->
</svg>
Priority support
</li>
<!-- More features -->
</ul>Butang CTA dalam Kad Harga
Setiap kad harga berakhir dengan butang CTA yang menonjol. Pada kad yang disyorkan (latar gelap), gunakan butang berisi putih untuk memberikan kontras dengan latar biru: w-full rounded-xl bg-white py-3 font-semibold text-blue-600. Pada kad yang tidak disyorkan, gunakan gaya berbingkai: w-full rounded-xl border-2 border-gray-300 py-3 font-semibold text-gray-900 hover:border-blue-500.
<!-- CTA on recommended (dark) card -->
<a href="/signup?plan=pro"
class="mt-8 block w-full rounded-xl bg-white py-3 text-center
font-semibold text-blue-600 transition hover:bg-blue-50">
Get started with Pro
</a>
<!-- CTA on standard card -->
<a href="/signup?plan=starter"
class="mt-8 block w-full rounded-xl border-2 border-gray-300 py-3
text-center font-semibold text-gray-700
transition hover:border-blue-500 hover:text-blue-600">
Get started free
</a>Togol Tahunan/Bulanan
Togol pengebilan tahunan/bulanan di atas kad harga membolehkan pengguna bertukar antara kekerapan pengebilan. Bina togol ini dengan dua butang di dalam bekas berbentuk pil rounded-full bg-gray-100. Gunakan JavaScript untuk menogol kelas active dan menukar harga. Tandakan tab yang aktif dengan bg-white shadow rounded-full untuk menghasilkan rupa kawalan bersegmen.
<div class="mb-12 flex justify-center">
<div class="flex rounded-full bg-gray-100 p-1">
<button id="toggle-monthly"
class="rounded-full px-6 py-2 text-sm font-semibold
bg-white shadow text-gray-900"
onclick="setMonthly()">
Monthly
</button>
<button id="toggle-annual"
class="rounded-full px-6 py-2 text-sm font-semibold text-gray-500"
onclick="setAnnual()">
Annual
<span class="ml-1 text-xs text-green-600 font-bold">-20%</span>
</button>
</div>
</div>Menyerlahkan Pelan Disyorkan
Untuk menjadikan pelan disyorkan lebih menonjol dalam susun atur tiga lajur, anda juga boleh membesarkannya sedikit menggunakan scale-105 atau memberikannya shadow-2xl yang lebih besar berbanding kad bersebelahan. Pada mudah alih, meletakkannya di tempat pertama dalam DOM dengan order-first memastikan pelan ini dilihat sebelum pilihan lain.
<div class="grid grid-cols-1 gap-8 lg:grid-cols-3 lg:items-stretch">
<!-- Starter -->
<div class="rounded-2xl border border-gray-200 p-8">...</div>
<!-- Pro (recommended) — scaled up on desktop -->
<div class="order-first rounded-2xl bg-blue-600 p-8 text-white
shadow-2xl lg:order-none lg:scale-105">
...
</div>
<!-- Enterprise -->
<div class="rounded-2xl border border-gray-200 p-8">...</div>
</div>Jalur Jaminan Wang Dikembalikan
Nota jaminan wang dikembalikan di bawah kad harga mengurangkan kebimbangan pembelian dan terbukti dapat meningkatkan kadar penukaran. Gunakan perenggan ringkas yang dipusatkan bersama ikon perisai atau kunci. Pastikan reka bentuknya sederhana — teks kelabu kecil dengan emoji atau ikon SVG kecil: mt-12 text-center text-sm text-gray-500 sudah memadai tanpa mengalih perhatian daripada kad di atas.
<div class="mt-12 flex flex-col items-center gap-2 text-center">
<svg class="h-6 w-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04
A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622
0-1.042-.133-2.052-.382-3.016z"/>
</svg>
<p class="text-sm text-gray-500">
<strong class="text-gray-700">30-day money-back guarantee.</strong>
No questions asked.
</p>
</div>Kad Harga Tersuai Perusahaan
Tahap Perusahaan selalunya tidak mempunyai harga tetap, sebaliknya memaparkan CTA Hubungi Jualan. Gantikan paparan harga dengan penerangan ringkas tentang manfaat perusahaan: SSO, sokongan khusus dan kontrak tersuai. Reka bentuk kad ini mengekalkan struktur kad lain, tetapi menggunakan butang CTA berbingkai yang dipautkan ke halaman hubungan atau tempahan Calendly.
<div class="rounded-2xl border border-gray-200 p-8">
<h3 class="text-xl font-bold text-gray-900">Enterprise</h3>
<p class="mt-1 text-sm text-gray-500">For large organizations with custom needs.</p>
<div class="mt-6">
<span class="text-3xl font-extrabold text-gray-900">Custom</span>
<p class="mt-1 text-sm text-gray-500">Pricing based on your requirements</p>
</div>
<a href="/contact"
class="mt-8 block w-full rounded-xl border-2 border-gray-300 py-3
text-center font-semibold text-gray-700 transition hover:border-blue-500">
Contact sales
</a>
</div>Gambaran Awal Soalan Lazim di Bawah Harga
Bahagian soalan lazim yang ringkas betul-betul di bawah jadual harga menjawab bantahan yang paling biasa: kaedah pembayaran, dasar pembatalan dan butiran percubaan percuma. Hadkan kepada tiga hingga lima item akordion atau senarai ringkas soalan dan jawapan dalam grid dua lajur. Ini mengurangkan pertanyaan sokongan dan menghapuskan halangan terakhir sebelum keputusan pendaftaran dibuat.
<div class="mx-auto mt-20 max-w-3xl">
<h3 class="mb-8 text-center text-xl font-bold text-gray-900">Frequently asked questions</h3>
<div class="space-y-4">
<div class="rounded-xl border border-gray-200 p-6">
<p class="font-semibold text-gray-900">Can I cancel anytime?</p>
<p class="mt-2 text-sm text-gray-500">
Yes. Cancel your subscription at any time from your account settings.
You will not be charged again after cancellation.
</p>
</div>
</div>
</div>Harga Responsif pada Mudah Alih
Pada mudah alih, grid harga tiga lajur akan disusun menjadi satu lajur. Pastikan kad pelan disyorkan mudah dibezakan dalam susun atur bertindan dengan mengekalkan warna latar dan perbezaan skala. Pertimbangkan untuk meletakkan bar bawah melekat pada mudah alih dengan CTA Bermula yang terapung di atas lipatan ketika pengguna menatal melalui kad harga.
<!-- Sticky CTA bar for mobile -->
<div class="fixed bottom-0 left-0 right-0 z-40 border-t border-gray-200
bg-white p-4 lg:hidden">
<a href="/signup"
class="block w-full rounded-xl bg-blue-600 py-3.5 text-center
font-semibold text-white transition hover:bg-blue-700">
Start for free — no card required
</a>
</div>Semakan Pantas
Uji pemahaman anda tentang konsep Tailwind CSS Mastery daripada pelajaran ini.
Imbas Kembali Pelajaran
Dalam pelajaran ini, anda mempelajari: membina grid harga tiga lajur dengan senarai ciri dan butang CTA, menyerlahkan pelan disyorkan dengan latar berwarna dan transformasi skala, serta menambah elemen yang meningkatkan kadar penukaran seperti jaminan wang dikembalikan dan CTA mudah alih yang melekat. Seterusnya, kita akan membina pengaki dan menambah kemasan responsif.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Soalan Lazim
Adakah pelajaran “Bahagian Jadual Harga” percuma?
Ya — teks penuh “Bahagian Jadual Harga” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Tailwind CSS Academy, tingkat taraf kepada CoddyKit PRO. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Bahagian Jadual Harga”?
Bina jadual harga tiga lajur dengan pelan disyorkan yang diserlahkan, senarai ciri dan CTA pembelian menggunakan utiliti grid serta sempadan. Anda berlatih Tailwind CSS Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Tailwind CSS Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Tailwind CSS Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.
Berapa lamakah pelajaran “Bahagian Jadual Harga” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Tailwind CSS Academy ini?
Ya. Setiap pelajaran Tailwind CSS Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Bahagian Utama dan Navigasi
- Bahagian Ciri dan Bukti Sosial
- Bahagian Jadual Harga
- Pengaki dan Kemasan Responsif