Sektioner för funktioner och sociala bevis
Skapa ett funktionsrutnät med ikoner och beskrivningar, följt av en sektion med omdömen i form av avatarkort och stjärnbetyg.
Sektioner för funktioner och sociala bevis är en gratis lektion i Tailwind CSS Academy på CoddyKit. Detta är lektion 2 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.
Funktionsektionens struktur
En funktionsektion kommunicerar produktens viktigaste värdeerbjudanden. Ett vanligt mönster är ett rutnät med tre eller fyra kolumner av funktionskort, där varje kort har en ikon, en kort titel och en beskrivning. Ovanför rutnätet skapar en liten ögonbrynsetikett och en sektionsrubrik sammanhang. Använd en ljusgrå bakgrund med bg-gray-50 för att visuellt skilja sektionen från den vita hero-sektionen.
<section class="bg-gray-50 px-4 py-24">
<div class="mx-auto max-w-7xl">
<!-- Section header -->
<div class="mb-16 text-center">
<span class="text-sm font-semibold uppercase tracking-widest text-blue-600">
Why Launchify
</span>
<h2 class="mt-2 text-3xl font-bold tracking-tight text-gray-900 md:text-4xl">
Everything you need to launch faster
</h2>
</div>
<!-- Feature grid -->
</div>
</section>Bygga funktionsrutnätet
Använd CSS Grid för att placera funktionskorten. Börja med en kolumn på mobiler med grid grid-cols-1 och utöka till tre kolumner på stora skärmar med lg:grid-cols-3. Lägg till gap-8 för konsekvent avstånd mellan korten. På så sätt ser funktionsrutnätet bra ut vid alla visningsbredder utan komplicerad hantering av media queries.
<div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
<!-- Feature card 1 -->
<div class="rounded-2xl bg-white p-8 shadow-sm">
<!-- Icon -->
<!-- Title -->
<!-- Description -->
</div>
<!-- Repeat for each feature -->
</div>Funktionskort med ikon
Varje funktionskort har en ikonbehållare, en fet titel och en kompletterande beskrivning. Ikonen placeras i en färgad, rundad kvadrat som skapas med flex h-12 w-12 items-center justify-center rounded-xl bg-blue-100. Själva ikonen är en liten SVG som färgsätts med text-blue-600. Titeln använder mt-4 font-semibold text-gray-900 och beskrivningen använder mt-2 text-sm text-gray-500.
<div class="rounded-2xl bg-white p-8 shadow-sm transition hover:shadow-md">
<!-- Icon -->
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-100">
<svg class="h-6 w-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
</div>
<!-- Content -->
<h3 class="mt-4 font-semibold text-gray-900">Lightning Fast</h3>
<p class="mt-2 text-sm text-gray-500 leading-relaxed">
Deploy your product in minutes with our one-click infrastructure setup.
No DevOps expertise required.
</p>
</div>Lägga till hovringseffekter på kort
Interaktiva hovringseffekter får funktionskorten att kännas genomarbetade. Använd transition hover:shadow-md för att lyfta kortet vid hovring. För en mer påtaglig effekt kan Ni lägga till hover:-translate-y-1 för att subtilt höja kortet. Kombinera med transition-all duration-200 för en mjuk känsla. Håll interaktionerna subtila så att de förstärker innehållet utan att distrahera.
<div class="rounded-2xl bg-white p-8 shadow-sm
transition-all duration-200 hover:-translate-y-1 hover:shadow-md">
<!-- Card content -->
</div>Alternerande funktionslayout
För en mer redaktionell funktionsektion kan Ni använda alternerande rader där ikonen eller bilden och texten byter sida. Använd flex flex-col md:flex-row för varje funktionsrad och vänd ordningen för funktioner med jämnt nummer med md:flex-row-reverse. Det skapar visuell rytm och förhindrar att layouten känns monoton på längre sidor.
<div class="space-y-24">
<!-- Feature row 1: image left, text right -->
<div class="flex flex-col items-center gap-12 md:flex-row">
<div class="flex-1">
<img src="/feature1.png" class="rounded-2xl shadow-lg" alt="Feature">
</div>
<div class="flex-1">
<h3 class="text-2xl font-bold text-gray-900">One-click deployments</h3>
<p class="mt-4 text-gray-500">Push code, ship product. Our CI/CD pipeline handles the rest.</p>
</div>
</div>
<!-- Feature row 2: text left, image right -->
<div class="flex flex-col items-center gap-12 md:flex-row-reverse">
<!-- reversed layout -->
</div>
</div>Översikt över social proof-sektionen
Social proof — omdömen, logotyper och recensioner — ökar konverteringsgraden betydligt. En logotyp-rad visar välkända varumärken som använder produkten, medan ett rutnät med omdömen ger detaljerade rekommendationer. Placera logotyp-raden direkt under hero-sektionen eller mellan funktions- och prissektionerna för maximal effekt.
<section class="px-4 py-16">
<div class="mx-auto max-w-7xl">
<!-- Logo strip -->
<p class="mb-8 text-center text-sm font-semibold text-gray-400 uppercase tracking-widest">
Trusted by teams at
</p>
<div class="flex flex-wrap items-center justify-center gap-12 opacity-60">
<!-- Company logos -->
</div>
</div>
</section>Rad med företagslogotyper
Företagslogotyper i förtroenderaden bör visas i gråskala för att undvika krockar mellan varumärkesfärger och Er färgpalett. Använd grayscale opacity-60 hover:grayscale-0 hover:opacity-100 transition så att logotyperna subtilt visar sin färg vid hovring. Håll logotypernas höjd konsekvent med h-8 eller h-6 och använd object-contain för att förhindra förvrängning.
<div class="flex flex-wrap items-center justify-center gap-12">
<img
src="/logos/company-a.svg"
alt="Company A"
class="h-8 object-contain grayscale opacity-60 transition hover:grayscale-0 hover:opacity-100"
/>
<img
src="/logos/company-b.svg"
alt="Company B"
class="h-8 object-contain grayscale opacity-60 transition hover:grayscale-0 hover:opacity-100"
/>
</div>Rutnät med omdömen
Placera omdömena i ett murverksliknande rutnät med CSS Grid och auto-rows-auto för kort med olika höjd, eller håll höjderna enhetliga. Varje omdömeskort visar ett citat, stjärnbetyg, avatar, namn och roll. Använd rounded-2xl bg-white p-6 shadow-sm som grund för korten — i linje med funktionskorten för visuell enhetlighet.
<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
<div class="rounded-2xl bg-white p-6 shadow-sm">
<!-- Stars -->
<div class="flex gap-1 text-yellow-400">
<span>★</span><span>★</span><span>★</span>
<span>★</span><span>★</span>
</div>
<!-- Quote -->
<p class="mt-3 text-sm text-gray-600 leading-relaxed">
'Launchify cut our deployment time from hours to minutes. Incredible product.'
</p>
<!-- Author -->
<div class="mt-4 flex items-center gap-3">
<img src="/avatar.jpg" class="h-10 w-10 rounded-full" alt="Author">
<div>
<p class="text-sm font-semibold text-gray-900">Sarah Chen</p>
<p class="text-xs text-gray-500">CTO at TechCo</p>
</div>
</div>
</div>
</div>Framhävt omdöme
Framhäv ett särskilt starkt omdöme i ett block med full bredd och mörkare eller färgad bakgrund så att det skiljer sig visuellt. Använd bg-blue-600 text-white rounded-3xl p-12 text-center för ett djärvt citatblock. Det bryter monotonin i rutnätet och drar blicken till Er starkaste social proof.
<div class="rounded-3xl bg-blue-600 p-12 text-center text-white">
<svg class="mx-auto h-10 w-10 text-blue-300" fill="currentColor" viewBox="0 0 32 32">
<!-- Quote icon -->
</svg>
<blockquote class="mt-6 text-2xl font-semibold italic">
'The best investment we made this year. Period.'
</blockquote>
<div class="mt-6 flex items-center justify-center gap-3">
<img src="/ceo.jpg" class="h-12 w-12 rounded-full ring-2 ring-blue-400" alt="CEO">
<div class="text-left">
<p class="font-semibold">James Rivera</p>
<p class="text-sm text-blue-200">CEO at Momentum Labs</p>
</div>
</div>
</div>Avstånd och visuell avgränsning mellan sektioner
Konsekvent avstånd mellan sektioner förhindrar att sidan känns trång eller alltför luftig. Använd py-24 som standard för vertikal utfyllnad i hela sektioner och py-16 för lättare accentsektioner som logotyp-raden. Variera bakgrundsfärgerna mellan sektionerna — vit, gray-50, vit — för att skapa implicita gränser utan behov av kanter eller avdelare.
<!-- Section color alternation pattern -->
<section class="bg-white px-4 py-24"><!-- Hero --></section>
<section class="bg-gray-50 px-4 py-24"><!-- Features --></section>
<section class="bg-white px-4 py-16"><!-- Logo strip --></section>
<section class="bg-blue-600 px-4 py-24"><!-- Featured quote --></section>
<section class="bg-white px-4 py-24"><!-- Testimonials grid --></section>Statistikrad för trovärdighet
En rad med viktig statistik — användare, drifttid och betyg — fungerar som social proof i ett kompakt format. Använd ett rutnät med tre eller fyra kolumner och centrerad text. Varje statistikvärde har ett stort, fett tal i text-4xl font-extrabold text-gray-900 och en liten etikett under. Lägg till en diskret övre kant med border-t border-gray-200 för att förankra raden mot sektionen ovanför.
<div class="grid grid-cols-2 gap-8 border-t border-gray-200 pt-12 md:grid-cols-4">
<div class="text-center">
<p class="text-4xl font-extrabold text-gray-900">2,000+</p>
<p class="mt-1 text-sm text-gray-500">Active users</p>
</div>
<div class="text-center">
<p class="text-4xl font-extrabold text-gray-900">99.9%</p>
<p class="mt-1 text-sm text-gray-500">Uptime SLA</p>
</div>
<div class="text-center">
<p class="text-4xl font-extrabold text-gray-900">4.9/5</p>
<p class="mt-1 text-sm text-gray-500">Average rating</p>
</div>
<div class="text-center">
<p class="text-4xl font-extrabold text-gray-900"><5min</p>
<p class="mt-1 text-sm text-gray-500">Setup time</p>
</div>
</div>Snabbkontroll
Testa Er förståelse av koncepten i Tailwind CSS Mastery från den här lektionen.
Sammanfattning av lektionen
I den här lektionen lärde Ni Er: att bygga ett responsivt funktionsrutnät med ikonbaserade kort och hovringseffekter, att lägga till en logotyp-rad med hovringseffekter i gråskala för social proof samt att skapa en omdömessektion med ett framhävt citatblock. Härnäst bygger vi sektionen med pristabellen.
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 ”Sektioner för funktioner och sociala bevis” gratis?
Ja – hela texten till ”Sektioner för funktioner och sociala bevis” 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 ”Sektioner för funktioner och sociala bevis”?
Skapa ett funktionsrutnät med ikoner och beskrivningar, följt av en sektion med omdömen i form av avatarkort och stjärnbetyg. 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 2 av 4.
Hur lång tid tar lektionen ”Sektioner för funktioner och sociala bevis”?
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