가격표 섹션
그리드와 테두리 유틸리티를 사용하여 추천 요금제를 강조한 3열 가격표와 기능 목록, 구매 CTA를 만듭니다.
가격표 섹션은(는) CoddyKit의 무료 Tailwind CSS Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Tailwind CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Tailwind CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.
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.
자주 묻는 질문
“가격표 섹션” 강의는 무료인가요?
네 — “가격표 섹션” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Tailwind CSS Academy 강의 전체를 잠금 해제할 수 있습니다. Tailwind CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“가격표 섹션”에서 뭘 배우나요?
그리드와 테두리 유틸리티를 사용하여 추천 요금제를 강조한 3열 가격표와 기능 목록, 구매 CTA를 만듭니다. 브라우저에서 직접 실행하는 실습 코드로 Tailwind CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Tailwind CSS Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Tailwind CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“가격표 섹션” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Tailwind CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Tailwind CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.