Fiyatlandırma Tablosu Bölümü
Izgara ve kenarlık yardımcılarını kullanarak önerilen planı vurgulayan, özellik listeleri ve satın alma CTA’ları içeren üç sütunlu bir fiyatlandırma tablosu oluşturun.
Fiyatlandırma Tablosu Bölümü, CoddyKit'te ücretsiz bir Tailwind CSS Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Tailwind CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Tailwind CSS Academy kursu toplamda 4 dersten oluşur.
Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.
Pricing Section Layout Overview
The pricing section is often the most conversion-critical part of a landing page. A classic pattern presents two or three tiers side by side in a grid, with one highlighted as the recommended plan. The section begins with a headline and optional annual/monthly toggle. Use bg-white px-4 py-24 for the section container and a centered header above the plans grid.
<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>Three-Column Pricing Grid
Use a three-column grid to show Starter, Pro, and Enterprise tiers. On mobile the cards stack vertically. Use grid grid-cols-1 gap-8 lg:grid-cols-3. The middle card (recommended plan) breaks out visually with a dark or colored background, a border, or increased shadow. Ensure the grid items share the same row height so they align when rendered side by side.
<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>Pricing Card Header
Each pricing card header includes the plan name, a short description, and the price with its billing period. The price should be visually dominant — use text-5xl font-extrabold for the amount and a smaller text-sm for the period. For the recommended card, add a Most Popular badge in an accent color above the plan name.
<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>Feature List Inside Pricing Card
Below the price, list the features included in the plan using an unordered list with checkmark icons. Use mt-8 space-y-3 on the list and style each item as a flex row with the checkmark icon on the left. Green checkmarks signal inclusion; gray or crossed items signal what is not in a lower tier. Keep the list concise — five to eight items maximum.
<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>CTA Button in Pricing Card
Each pricing card ends with a prominent CTA button. On the recommended card (dark background), use a white-filled button to contrast with the blue background: w-full rounded-xl bg-white py-3 font-semibold text-blue-600. On non-recommended cards, use an outlined style: 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>Annual/Monthly Toggle
An annual/monthly billing toggle above the pricing cards lets users switch between billing frequencies. Build it with two buttons inside a rounded-full bg-gray-100 pill container. Use JavaScript to toggle an active class and swap the prices. Mark the active tab with bg-white shadow rounded-full to create a segmented control appearance.
<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>Highlighting the Recommended Plan
To make the recommended plan visually pop in a three-column layout, you can also scale it up slightly using scale-105 or give it a larger shadow-2xl compared to sibling cards. On mobile, placing it first in the DOM with order-first ensures it is seen before the other options.
<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>Money-Back Guarantee Strip
A money-back guarantee note below the pricing cards reduces purchase anxiety and is a proven conversion booster. Use a simple centered paragraph with a shield or lock icon. Keep it subtle — small gray text with an emoji or small SVG icon: mt-12 text-center text-sm text-gray-500 is sufficient without distracting from the cards above.
<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>Enterprise Custom Pricing Card
The Enterprise tier often has no fixed price, instead showing a Contact Sales CTA. Replace the price display with a short description of enterprise benefits: SSO, dedicated support, custom contracts. The card design mirrors the other cards structurally but with an outlined CTA button linking to a contact page or Calendly booking.
<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>FAQ Teaser Below Pricing
A short FAQ section directly below the pricing table addresses the most common objections: payment methods, cancellation policies, and free trial details. Keep it to three to five accordion items or a simple list of questions and answers in a two-column grid. This reduces support inquiries and removes the last barriers before a signup decision.
<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>Responsive Pricing on Mobile
On mobile, a three-column pricing grid stacks into a single column. Ensure the recommended plan card is clearly distinguishable in the stacked layout by maintaining its background color and scale differences. Consider placing a sticky bottom bar on mobile with a Get started CTA that floats above the fold as users scroll through the pricing cards.
<!-- 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>Quick Check
Test your understanding of Tailwind CSS Mastery concepts from this lesson.
Lesson Recap
In this lesson you learned: building a three-column pricing grid with feature lists and CTA buttons, highlighting the recommended plan with a colored background and scale transform, and adding conversion-boosting elements like money-back guarantees and a mobile sticky CTA. Next up we build the footer and add responsive polish.
Sıkça Sorulan Sorular
“Fiyatlandırma Tablosu Bölümü” dersi ücretsiz mi?
Evet — “Fiyatlandırma Tablosu Bölümü” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Tailwind CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Tailwind CSS Academy kursu toplamda 4 dersten oluşur.
“Fiyatlandırma Tablosu Bölümü” dersinde ne öğreneceğim?
Izgara ve kenarlık yardımcılarını kullanarak önerilen planı vurgulayan, özellik listeleri ve satın alma CTA’ları içeren üç sütunlu bir fiyatlandırma tablosu oluşturun. Tailwind CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Tailwind CSS Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Tailwind CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.
“Fiyatlandırma Tablosu Bölümü” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Tailwind CSS Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Tailwind CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Tanıtım ve Gezinme Bölümü
- Özellikler ve Sosyal Kanıt Bölümleri
- Fiyatlandırma Tablosu Bölümü
- Alt Bilgi ve Duyarlı Tasarım İnce Ayarları