Sektioner med funktioner og social proof
Opret et feature-grid med ikoner og beskrivelser efterfulgt af en testimonials-sektion med avatarkort og stjernebedømmelser.
Sektioner med funktioner og social proof er en gratis Tailwind CSS Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Tailwind CSS Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Tailwind CSS Academy-kurset indeholder 4 lektioner i alt.
Struktur for funktionssektionen
En funktionssektion formidler dit produkts vigtigste værdiforslag. Et almindeligt mønster er et gitter med tre eller fire kolonner af funktionskort, som hver indeholder et ikon, en kort titel og en beskrivelse. Over gitteret skaber en lille etikette og en sektionsoverskrift kontekst. Brug en lysegrå baggrund med bg-gray-50 for visuelt at adskille denne sektion fra det hvide heroafsnit.
<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>Opbygning af funktionsgitteret
Brug CSS Grid til at placere funktionskortene. Begynd med én kolonne på mobil med grid grid-cols-1, og udvid til tre kolonner på store skærme med lg:grid-cols-3. Tilføj gap-8 for ensartet afstand mellem kortene. Denne tilgang sikrer, at funktionsgitteret ser godt ud ved alle visningsbredder uden besværlige medieforespørgsler.
<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
Hvert funktionskort har en ikonbeholder, en fed titel og en understøttende beskrivelse. Ikonet placeres i en farvet afrundet firkant, der oprettes med flex h-12 w-12 items-center justify-center rounded-xl bg-blue-100. Selve ikonet er en lille SVG-fremstilling med farven text-blue-600. Titlen bruger mt-4 font-semibold text-gray-900, og beskrivelsen bruger 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>Tilføjelse af svæveeffekter til kort
Interaktive svæveeffekter får funktionskortene til at virke gennemarbejdede. Brug transition hover:shadow-md for at løfte kortet ved svævning. Hvis du ønsker en mere markant effekt, kan du tilføje hover:-translate-y-1 for diskret at hæve kortet. Kombinér det med transition-all duration-200 for en glidende oplevelse. Hold interaktionerne diskrete, så de forbedrer indholdet uden at aflede opmærksomheden.
<div class="rounded-2xl bg-white p-8 shadow-sm
transition-all duration-200 hover:-translate-y-1 hover:shadow-md">
<!-- Card content -->
</div>Skiftende funktionslayout
Hvis du ønsker en mere redaktionel funktionssektion, kan du bruge skiftende rækker, hvor ikon eller billede og tekst bytter side. Brug flex flex-col md:flex-row for hver funktionsrække, og vend rækkefølgen for funktioner med lige nummer med md:flex-row-reverse. Det skaber visuel rytme og forhindrer, at layoutet virker ensformigt på længere sider.
<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>Oversigt over sektionen med social dokumentation
Social dokumentation — kundeudtalelser, logoer og anmeldelser — øger konverteringsraten betydeligt. En logorække viser genkendelige brands, der bruger dit produkt, mens et gitter med kundeudtalelser giver detaljerede anbefalinger. Placér logorækken direkte under heroafsnittet eller mellem funktions- og prisafsnittene for størst mulig 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>Række med virksomhedslogoer
Virksomhedslogoer i tillidsrækken bør vises i gråtoner for at undgå sammenstød mellem brandfarver og din palet. Anvend grayscale opacity-60 hover:grayscale-0 hover:opacity-100 transition, så logoerne diskret viser deres farve ved svævning. Hold logoernes højde ensartet med h-8 eller h-6, og brug object-contain for at forhindre forvræ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>Gitter med kundeudtalelser
Placér kundeudtalelser i et gitter, der minder om et murværkslayout, ved hjælp af CSS Grid med auto-rows-auto for kort med forskellig højde, eller hold dem ensartede. Hvert kort viser et citat, en stjernebedømmelse, en avatar, et navn og en rolle. Brug rounded-2xl bg-white p-6 shadow-sm som kortets grundstil — i tråd med funktionskortene for at skabe visuel sammenhæng.
<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>Fremhævet kundeudtalelse
Fremhæv én særlig kundeudtalelse i en fremhævet blok i fuld bredde med en mørkere eller farvet baggrund, så den skiller sig visuelt ud. Brug bg-blue-600 text-white rounded-3xl p-12 text-center til en markant citatblok. Det bryder gitterets ensformighed og leder blikket hen på din stærkeste sociale dokumentation.
<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>Afstand mellem sektioner og visuel adskillelse
Ensartet afstand mellem sektioner forhindrer, at siden virker trang eller for luftig. Brug py-24 som standardlodret indvendig afstand for hele sektioner og py-16 til lettere accentsektioner som logorækken. Skift mellem baggrundsfarver i sektionerne — hvid, grå-50, hvid — for at skabe implicitte grænser uden behov for kanter eller adskillere.
<!-- 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>Statistikbjælke for troværdighed
En række nøgletal — brugere, oppetid og bedømmelser — fungerer som social dokumentation i et kompakt format. Brug et gitter med tre eller fire kolonner og centreret tekst. Hvert nøgletal har et stort fedt tal i text-4xl font-extrabold text-gray-900 og en lille etiket nedenunder. Tilføj en diskret øvre kant med border-t border-gray-200 for at forankre bjælken mod sektionen ovenfor.
<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>Hurtigt tjek
Test din forståelse af begreberne i Tailwind CSS Mastery fra denne lektion.
Opsummering af lektionen
I denne lektion lærte du: at bygge et responsivt funktionsgitter med ikonbaserede kort og svæveeffekter, at tilføje en logorække med svæveeffekter i gråtoner til social dokumentation og at oprette en sektion med kundeudtalelser med en fremhævet citatblok. Næste gang bygger vi sektionen med pristabellen.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 30
- Lektioner
- 120
Ofte stillede spørgsmål
Er lektionen “Sektioner med funktioner og social proof” gratis?
Ja — hele teksten til “Sektioner med funktioner og social proof” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Tailwind CSS Academy-kurset, skal du opgradere til CoddyKit PRO. Tailwind CSS Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Sektioner med funktioner og social proof”?
Opret et feature-grid med ikoner og beskrivelser efterfulgt af en testimonials-sektion med avatarkort og stjernebedømmelser. Du øver dig i Tailwind CSS Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Tailwind CSS Academy?
Der kræves ingen tidligere erfaring. Tailwind CSS Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.
Hvor lang tid tager lektionen “Sektioner med funktioner og social proof”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Tailwind CSS Academy-lektion?
Ja. Alle Tailwind CSS Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Hero- og navigationssektion
- Sektioner med funktioner og social proof
- Sektion med pristabel
- Footer og responsiv finpudsning