Hero- och navigeringssektion
Bygg sidhuvudet med en klistrad navbar och en hero-sektion med rubrik, kompletterande text, CTA-knappar och en dekorativ bakgrundsgradient.
Hero- och navigeringssektion är en gratis lektion i Tailwind CSS Academy på CoddyKit. Detta är lektion 1 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.
Planera landningssidans layout
En marknadsföringsinriktad landningssida följer vanligtvis en förutsägbar struktur: en fast navigeringsrad högst upp, en hero-sektion med rubrik och CTA, följd av funktioner, omdömen, priser och en sidfot. Genom att börja med navigeringsraden och hero-sektionen kan Ni etablera sidans visuella ton och det vertikala rytmen för allt som följer.
<!-- Page structure overview -->
<body class="bg-white text-gray-900">
<header><!-- Sticky navbar --></header>
<main>
<section><!-- Hero --></section>
<section><!-- Features --></section>
<section><!-- Testimonials --></section>
<section><!-- Pricing --></section>
</main>
<footer><!-- Footer --></footer>
</body>Bygga skalet för den fasta navigeringsraden
Använd sticky top-0 z-50 för att hålla navigeringsraden synlig när användarna scrollar. Lägg till bg-white/90 backdrop-blur-sm för ett modernt utseende med frostat glas. border-b border-gray-200 skapar en diskret avgränsning mot sidans innehåll. Omslut allt i en behållare med max-w-7xl mx-auto px-4 för att begränsa navigeringens bredd på stora skärmar.
<header class="sticky top-0 z-50 border-b border-gray-200 bg-white/90 backdrop-blur-sm">
<nav class="mx-auto flex max-w-7xl items-center justify-between px-4 py-4">
<!-- Logo -->
<!-- Nav links -->
<!-- CTA button -->
</nav>
</header>Lägga till logotyp och navigeringslänkar
Placera logotypen till vänster med flex items-center gap-2. Navigeringslänkarna placeras centrerat i en flexrad med hidden md:flex gap-6 — dolda på mobiler och synliga från medelstora skärmar och uppåt. Varje länk använder text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors för en ren och interaktiv känsla.
<nav class="mx-auto flex max-w-7xl items-center justify-between px-4 py-4">
<!-- Logo -->
<a href="/" class="flex items-center gap-2 font-bold text-gray-900">
<div class="h-8 w-8 rounded-lg bg-blue-600"></div>
Launchify
</a>
<!-- Nav links (hidden on mobile) -->
<div class="hidden gap-8 md:flex">
<a href="#features" class="text-sm font-medium text-gray-600 transition-colors hover:text-gray-900">Features</a>
<a href="#pricing" class="text-sm font-medium text-gray-600 transition-colors hover:text-gray-900">Pricing</a>
<a href="#about" class="text-sm font-medium text-gray-600 transition-colors hover:text-gray-900">About</a>
</div>
</nav>Lägga till CTA-knappen i navigeringsraden
Placera en CTA-knapp på navigeringsradens högra sida. Den primära CTA:n använder en fylld bakgrund med bg-blue-600 text-white, medan en sekundär spökad länk eller inloggningslänk kan placeras bredvid. Håll knapparna kompakta i navigeringsraden med px-4 py-2 text-sm så att de inte dominerar sidhuvudets utrymme.
<div class="flex items-center gap-3">
<a href="/login"
class="hidden text-sm font-medium text-gray-600 hover:text-gray-900 md:inline">
Log in
</a>
<a href="/signup"
class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white
shadow-sm transition hover:bg-blue-700">
Get started
</a>
<!-- Hamburger for mobile -->
<button class="rounded-md p-2 text-gray-600 hover:bg-gray-100 md:hidden">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
</div>Hero-sektionens layout
Hero-sektionen är vanligtvis sidans mest effektfulla del. Centrera innehållet vertikalt och horisontellt med flex flex-col items-center justify-center text-center. Ange en generös minimihöjd med min-h-[calc(100vh-4rem)] för att fylla visningsytan under navigeringsraden och lägg till px-4 py-24 för luft runt innehållet.
<section class="flex min-h-[calc(100vh-4rem)] flex-col items-center
justify-center px-4 py-24 text-center">
<!-- Badge -->
<!-- Headline -->
<!-- Subtext -->
<!-- CTA buttons -->
<!-- Hero image / illustration -->
</section>Lägga till en bakgrundsgradient
Ge hero-sektionen visuellt djup med en diskret radiell eller linjär gradient. Med bg-gradient-to-b from-blue-50 to-white skapas en mjuk övergång från en tonad överkant till en ren vit underkant. För en mer dramatisk effekt kan Ni kombinera en gradient med en dekorativ form som positioneras absolut bakom innehållet.
<section class="relative flex min-h-[calc(100vh-4rem)] flex-col items-center
justify-center overflow-hidden bg-gradient-to-b
from-blue-50 to-white px-4 py-24 text-center">
<!-- Decorative blob -->
<div class="absolute -top-40 left-1/2 h-[500px] w-[500px] -translate-x-1/2
rounded-full bg-blue-100 opacity-40 blur-3xl"></div>
<!-- Content on top of blob -->
<div class="relative z-10">
<!-- Hero content here -->
</div>
</section>Hero-rubrik och kompletterande text
Rubriken är sidans viktigaste text. Använd stor text, exempelvis text-4xl md:text-6xl font-extrabold tracking-tight text-gray-900, för att fånga uppmärksamheten. Följ den med en underrubrik i mt-6 max-w-2xl text-lg text-gray-500. Begränsa den kompletterande textens bredd med max-w-2xl mx-auto så att raderna förblir lättlästa.
<div class="relative z-10 flex flex-col items-center">
<!-- Eyebrow badge -->
<span class="mb-4 rounded-full bg-blue-100 px-4 py-1.5 text-xs font-semibold
uppercase tracking-widest text-blue-700">
Now in Public Beta
</span>
<!-- Headline -->
<h1 class="text-4xl font-extrabold tracking-tight text-gray-900 md:text-6xl">
Ship faster with
<span class="text-blue-600">Launchify</span>
</h1>
<!-- Subtext -->
<p class="mx-auto mt-6 max-w-2xl text-lg text-gray-500">
The all-in-one platform for indie makers to build, launch, and grow
their SaaS products without the infrastructure headaches.
</p>
</div>CTA-knappar i hero-sektionen
Placera en primär och en sekundär CTA-knapp under den kompletterande texten. Använd mt-10 flex flex-col items-center gap-4 sm:flex-row så att knapparna staplas på mobiler och placeras bredvid varandra på små skärmar och större. Den primära knappen använder en fylld stil, medan den sekundära använder en kontur- eller spökad stil för att skapa en tydlig hierarki.
<div class="mt-10 flex flex-col items-center gap-4 sm:flex-row">
<!-- Primary CTA -->
<a href="/signup"
class="rounded-xl bg-blue-600 px-8 py-3.5 text-base font-semibold
text-white shadow-lg transition hover:bg-blue-700
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
Start for free
</a>
<!-- Secondary CTA -->
<a href="#demo"
class="flex items-center gap-2 text-base font-semibold text-gray-700
transition hover:text-gray-900">
<span class="flex h-8 w-8 items-center justify-center rounded-full bg-gray-100">
▶
</span>
Watch demo
</a>
</div>Social proof-rad i hero-sektionen
Lägg till ett diskret element med social proof under CTA-knapparna, till exempel avatarstaplar och ett stjärnbetyg. Det skapar trygghet hos förstagångsbesökare utan att distrahera från den primära CTA:n. Använd negativa marginaler på överlappande avatarer med -ml-2 och en liten rundad ring för att ge varje avatar en tydlig kant.
<div class="mt-10 flex flex-col items-center gap-2">
<!-- Avatars -->
<div class="flex -space-x-2">
<img class="h-8 w-8 rounded-full ring-2 ring-white" src="/avatar1.jpg" alt="User">
<img class="h-8 w-8 rounded-full ring-2 ring-white" src="/avatar2.jpg" alt="User">
<img class="h-8 w-8 rounded-full ring-2 ring-white" src="/avatar3.jpg" alt="User">
<div class="flex h-8 w-8 items-center justify-center rounded-full
bg-blue-100 text-xs font-semibold text-blue-700 ring-2 ring-white">
+2k
</div>
</div>
<!-- Stars -->
<p class="text-sm text-gray-500">
<span class="text-yellow-400">★★★★★</span>
Loved by 2,000+ makers
</p>
</div>Skärmbild eller illustration i hero-sektionen
En produktskärmbild eller illustration under texten ger besökarna en förhandsvisning av vad de registrerar sig för. Använd mt-16 rounded-2xl shadow-2xl border border-gray-200 overflow-hidden för att visa den i en genomarbetad ram. På mobiler bör den ha full bredd; på större skärmar begränsar Ni bredden med max-w-4xl mx-auto.
<div class="mx-auto mt-16 max-w-4xl">
<div class="overflow-hidden rounded-2xl border border-gray-200 shadow-2xl">
<img
src="/screenshot.png"
alt="Launchify dashboard preview"
class="w-full"
/>
</div>
</div>Responsiva justeringar av hero-sektionen
Granska hero-sektionen vid varje brytpunkt. På mobiler minskar rubrikstorleken från text-6xl till text-4xl. CTA-knapparna staplas vertikalt med flex-col och växlar till sm:flex-row vid den lilla brytpunkten. Skärmbilden kan behöva hidden md:block om den är för liten för att vara användbar på telefoner. Testa alltid i en riktig mobil visningsyta.
<!-- Responsive headline example -->
<h1 class="text-3xl font-extrabold tracking-tight text-gray-900
sm:text-5xl md:text-6xl lg:text-7xl">
Ship faster with Launchify
</h1>
<!-- Hide large screenshot on mobile -->
<div class="mx-auto mt-16 hidden max-w-4xl md:block">
<img src="/screenshot.png" class="w-full rounded-2xl shadow-2xl" alt="Dashboard">
</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 en fast navigeringsrad med frostat glas och logotyp, länkar och CTA, att skapa en hero-sektion med gradientbakgrund, rubrik, kompletterande text och social proof samt att lägga till responsiva justeringar för mobila och stora brytpunkter. Härnäst bygger vi sektionerna för funktioner och social proof.
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 ”Hero- och navigeringssektion” gratis?
Ja – hela texten till ”Hero- och navigeringssektion” 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 ”Hero- och navigeringssektion”?
Bygg sidhuvudet med en klistrad navbar och en hero-sektion med rubrik, kompletterande text, CTA-knappar och en dekorativ bakgrundsgradient. 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 1 av 4.
Hur lång tid tar lektionen ”Hero- och navigeringssektion”?
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