Sektion med pristabell
Bygg en pristabell med tre kolumner, en markerad rekommenderad plan, funktionslistor och köp-CTA:er med hjälp av rutnäts- och kantlinjeverktyg.
Sektion med pristabell är en gratis lektion i Tailwind CSS Academy på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Tailwind CSS Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Tailwind CSS Academy innehåller totalt 4 lektioner.
Översikt över prissektionens layout
Prissektionen är ofta den mest konverteringskritiska delen av en landningssida. Ett klassiskt mönster visar två eller tre nivåer bredvid varandra i ett rutnät, där en nivå framhävs som den rekommenderade planen. Sektionen börjar med en rubrik och en valfri växlare för årsvis/månadsvis betalning. Använd bg-white px-4 py-24 för sektionsbehållaren och en centrerad rubrik ovanför planrutnätet.
<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>Prिसrutnät med tre kolumner
Använd ett rutnät med tre kolumner för nivåerna Starter, Pro och Enterprise. På mobiler staplas korten vertikalt. Använd grid grid-cols-1 gap-8 lg:grid-cols-3. Det mittersta kortet, den rekommenderade planen, framhävs visuellt med en mörk eller färgad bakgrund, en kant eller en kraftigare skugga. Se till att rutnätets objekt har samma radhöjd så att de linjerar när de visas bredvid varandra.
<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>Priskortets sidhuvud
Varje priskorts sidhuvud innehåller plannamnet, en kort beskrivning samt priset med sin betalningsperiod. Priset bör dominera visuellt — använd text-5xl font-extrabold för beloppet och en mindre text-sm för perioden. Lägg till märket Most Popular i en accentfärg ovanför plannamnet för det rekommenderade kortet.
<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>Funktionslista i priskortet
Lista funktionerna som ingår i planen under priset med en punktlista och bockikoner. Använd mt-8 space-y-3 på listan och utforma varje objekt som en flexrad med bockikonen till vänster. Gröna bockar signalerar att något ingår; grå eller överkorsade objekt visar vad som inte ingår i en lägre nivå. Håll listan kort — högst fem till åtta objekt.
<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-knapp i priskortet
Varje priskort avslutas med en framträdande CTA-knapp. Använd på det rekommenderade kortet, som har mörk bakgrund, en vitfylld knapp som kontrasterar mot den blå bakgrunden: w-full rounded-xl bg-white py-3 font-semibold text-blue-600. På kort som inte rekommenderas använder Ni en konturstil: 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>Växlare för årsvis/månadsvis betalning
Med en växlare för årsvis/månadsvis fakturering ovanför priskorten kan användare byta faktureringsintervall. Bygg den med två knappar inuti en pillerformad behållare med rounded-full bg-gray-100. Använd JavaScript för att växla klassen active och byta priserna. Markera den aktiva fliken med bg-white shadow rounded-full för att skapa utseendet hos ett segmenterat kontrollfält.
<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>Framhäv det rekommenderade abonnemanget
För att få det rekommenderade abonnemanget att framträda tydligt i en layout med tre kolumner kan du också skala upp det något med scale-105 eller ge det en större shadow-2xl än de intilliggande korten. På mobiler ser du till att det visas före de andra alternativen genom att placera det först i DOM-trädet med order-first.
<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>Rad om pengarna-tillbaka-garanti
En notis om pengarna-tillbaka-garanti under priskorten minskar osäkerheten inför köpet och är ett beprövat sätt att öka konverteringen. Använd ett enkelt centrerat stycke med en sköld- eller låsikon. Håll det diskret – liten grå text med en emoji eller en liten SVG-ikon: mt-12 text-center text-sm text-gray-500 räcker utan att dra uppmärksamheten från korten ovanför.
<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>Kort med anpassad företagsprissättning
Enterprise-nivån har ofta inget fast pris utan visar i stället en CTA med texten Kontakta försäljningen. Ersätt prisvisningen med en kort beskrivning av fördelarna för företag: SSO, dedikerad support och anpassade avtal. Kortets struktur motsvarar de andra kortens, men CTA-knappen har en kontur och länkar till en kontaktsida eller en bokning i 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>Förhandsvisning av FAQ under prissättningen
En kort FAQ-sektion direkt under pristabellen bemöter de vanligaste invändningarna: betalningsmetoder, regler för uppsägning och information om den kostnadsfria provperioden. Begränsa den till tre till fem dragspelsobjekt eller en enkel lista med frågor och svar i ett rutnät med två kolumner. Det minskar antalet supportärenden och undanröjer de sista hindren innan användaren registrerar sig.
<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>Responsiv prissättning på mobiler
På mobiler staplas ett prisrutnät med tre kolumner till en enda kolumn. Se till att det rekommenderade abonnemangskortet tydligt skiljer sig från de andra i den staplade layouten genom att behålla skillnaderna i bakgrundsfärg och skala. Överväg att placera en fast bottenrad på mobilen med en CTA med texten Kom igång, som ligger ovanför den synliga delen när användaren bläddrar genom priskorten.
<!-- 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>Snabb kontroll
Testa dina kunskaper om koncepten i Tailwind CSS Mastery från den här lektionen.
Sammanfattning av lektionen
I den här lektionen har du lärt dig att bygga ett prisrutnät med tre kolumner och funktionslistor och CTA-knappar, att framhäva det rekommenderade abonnemanget med en färgad bakgrund och en skaltransformering samt att lägga till konverteringshöjande element som pengarna-tillbaka-garantier och en fast mobil CTA. Nästa steg är att bygga sidfoten och förbättra den responsiva utformningen.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 30
- Lektioner
- 120
Vanliga frågor
Är lektionen ”Sektion med pristabell” gratis?
Ja – hela texten till ”Sektion med pristabell” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Tailwind CSS Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Tailwind CSS Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Sektion med pristabell”?
Bygg en pristabell med tre kolumner, en markerad rekommenderad plan, funktionslistor och köp-CTA:er med hjälp av rutnäts- och kantlinjeverktyg. Ni övar på Tailwind CSS Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Tailwind CSS Academy?
Du behöver inga förkunskaper. Utbildningen i Tailwind CSS Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.
Hur lång tid tar lektionen ”Sektion med pristabell”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Tailwind CSS Academy-lektionen?
Ja. Varje Tailwind CSS Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Hero- och navigeringssektion
- Sektioner för funktioner och sociala bevis
- Sektion med pristabell
- Sidfot och responsiv finputsning