1 maja 2026

tailwind css neobrutalizm poradnik tworzenie stron css

Jak zbudować neobrutalistyczną stronę z Tailwind CSS v4 (krok po kroku)

Naucz się budować kompletną neobrutalistyczną stronę od zera przy użyciu Tailwind CSS v4. Ten praktyczny poradnik przeprowadzi cię przez konfigurację, ustawienia i budowę każdego komponentu, z przykładami kodu do skopiowania i wklejenia.

Dov Azencot

@DovAzencot

Udostępnij na X

Dobra, programiści. Zbudujmy coś odważnego.

Żadnej teorii. Żadnej waty. Tylko ty, ja i terminal. Do końca tego poradnika będziesz mieć w pełni działającą neobrutalistyczną stronę zbudowaną w Tailwind CSS v4.

Mowa o:

Grubych czarnych ramkach
Twardych rzucanych cieniach
Akcentach w elektryzującej żółci
Masywnej typografii
Zerze zaokrąglonych rogów

To nie jest poradnik w stylu „oto komponent”. Budujemy całą landing page od zera: sekcję hero, funkcje, cennik, stopkę, wszystko. Każda linijka kodu wyjaśniona. Każda decyzja projektowa uzasadniona.

Weź kawę. Otwórz terminal. Zróbmy się brutalni.

Co budujemy

Zanim zaczniemy, oto co tworzymy:

Landing page dla fikcyjnego produktu SaaS o nazwie „BoldTask”: narzędzia do zarządzania projektami, które nie wygląda jak każde inne narzędzie do zarządzania projektami.

Strona będzie zawierać:

Sekcję hero z CTA
Karty funkcji
Tabelę cenową
Sekcję z opiniami
Stopkę

Wszystko w tej charakterystycznej neobrutalistycznej estetyce: odważnej, kontrastowej i nie do zignorowania.

Stack technologiczny:

Tailwind CSS v4 (najnowszy i najlepszy)
HTML (albo React/Next.js, jeśli wolisz)
Google Fonts (Archivo Black + Space Grotesk)

Szacowany czas: 45-60 minut, jeśli będziesz podążać krok po kroku

Krok 1: przygotowanie projektu (5 minut)

Zacznijmy od zera. Ja używam w tym poradniku prostej konfiguracji HTML, ale możesz ją bez trudu dostosować do React, Next.js czy dowolnego frameworka.

Stwórz swój projekt

mkdir neobrutalism-website
cd neobrutalism-website

Zainicjuj npm i zainstaluj Tailwind v4

npm init -y
npm install tailwindcss@next @tailwindcss/vite@next

Uwaga: instalujemy Tailwind v4 (obecnie w wersji beta, ale już wystarczająco stabilny do produkcji). Tag @next daje ci v4.

Stwórz strukturę projektu

mkdir src
touch src/index.html src/styles.css

Twoja struktura folderów powinna wyglądać tak:

neobrutalism-website/
├── src/
│   ├── index.html
│   └── styles.css
├── package.json
└── node_modules/

Krok 2: konfiguracja Tailwind v4 (3 minuty)

Tailwind v4 wprowadza nowy, czystszy system konfiguracji. Zamiast tailwind.config.js wszystko konfiguruje się teraz w CSS.

Stwórz plik ze stylami

Otwórz src/styles.css i dodaj:

@import "tailwindcss";
 
/* Tailwind v4 Theme Configuration */
@theme {
  /* Fonts */
  --font-family-sans: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-family-display: 'Archivo Black', ui-sans-serif, system-ui, sans-serif;
 
  /* Colors - Neobrutalist Palette */
  --color-brutal-yellow: #ffdb33;
  --color-brutal-pink: #ff006e;
  --color-brutal-cyan: #00f0ff;
  --color-brutal-black: #000000;
  --color-brutal-white: #ffffff;
  --color-brutal-gray: #e5e5e5;
 
  /* Border Radius - Zero for neobrutalism */
  --radius-none: 0px;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
 
  /* Border Widths - Thick */
  --border-width-default: 3px;
  --border-width-thick: 4px;
  --border-width-heavy: 6px;
 
  /* Shadows - Hard offset shadows (no blur) */
  --shadow-brutal-sm: 2px 2px 0 0 var(--color-brutal-black);
  --shadow-brutal: 4px 4px 0 0 var(--color-brutal-black);
  --shadow-brutal-md: 6px 6px 0 0 var(--color-brutal-black);
  --shadow-brutal-lg: 8px 8px 0 0 var(--color-brutal-black);
  --shadow-brutal-xl: 10px 10px 0 0 var(--color-brutal-black);
 
  /* Spacing adjustments */
  --spacing-brutal: 1.5rem;
}
 
/* Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
body {
  font-family: var(--font-family-sans);
  background-color: var(--color-brutal-white);
  color: var(--color-brutal-black);
  line-height: 1.6;
}
 
/* Custom Utility Classes */
.border-brutal {
  border: 4px solid var(--color-brutal-black);
}
 
.border-brutal-thick {
  border: 6px solid var(--color-brutal-black);
}
 
.shadow-brutal {
  box-shadow: var(--shadow-brutal);
}
 
.shadow-brutal-lg {
  box-shadow: var(--shadow-brutal-lg);
}
 
.shadow-brutal-xl {
  box-shadow: var(--shadow-brutal-xl);
}
 
/* Hover effect - shadow movement */
.btn-brutal {
  transition: all 0.15s ease;
}
 
.btn-brutal:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 0 var(--color-brutal-black);
}
 
.btn-brutal:active {
  transform: translate(4px, 4px);
  box-shadow: 0px 0px 0 0 var(--color-brutal-black);
}

Co przed chwilą zrobiliśmy:

Ustawiliśmy własną paletę kolorów (czerń, biel, żółć, róż, cyjan)
Wyzerowaliśmy wszystkie wartości border-radius (neobrutalizm = ostre krawędzie)
Stworzyliśmy narzędzia do twardych cieni (przesunięte, bez rozmycia)
Dodaliśmy własne efekty hover dla przycisków, które naśladują „wciskanie” cienia

Krok 3: struktura HTML (5 minut)

Stwórz podstawową strukturę HTML. Otwórz src/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BoldTask - Project Management That Doesn't Suck</title>
 
  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">
 
  <!-- Tailwind CSS -->
  <link rel="stylesheet" href="/src/styles.css">
</head>
<body>
  <!-- Navigation -->
  <nav class="border-b-4 border-brutal-black bg-brutal-white">
    <div class="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center">
      <div class="text-2xl font-display">BoldTask</div>
      <div class="hidden md:flex gap-8">
        <a href="#features" class="font-bold hover:text-brutal-pink transition-colors">Features</a>
        <a href="#pricing" class="font-bold hover:text-brutal-pink transition-colors">Pricing</a>
        <a href="#about" class="font-bold hover:text-brutal-pink transition-colors">About</a>
      </div>
      <button class="bg-brutal-yellow border-brutal shadow-brutal px-6 py-2 font-bold uppercase btn-brutal">
        Sign Up
      </button>
    </div>
  </nav>
 
  <!-- We'll add more sections here -->
 
  <main>
    <!-- Hero section will go here -->
    <!-- Features section will go here -->
    <!-- Pricing section will go here -->
    <!-- Testimonial section will go here -->
  </main>
 
  <!-- Footer will go here -->
 
</body>
</html>

Skonfiguruj serwer deweloperski

Potrzebujemy sposobu na podgląd naszej pracy. Użyjmy Vite:


pnpm add vite
npm install vite
yarn add vite
bun add vite

Dodaj ten skrypt do swojego package.json:

{
  "scripts": {
    "dev": "vite src"
  }
}

Teraz uruchom:


pnpm dev
npm run dev
yarn dev
bun dev

Otwórz http://localhost:5173 w przeglądarce. Powinieneś zobaczyć podstawowy pasek nawigacji z logo BoldTask.

Krok 4: budowa sekcji hero (10 minut)

Teraz gwiazda wieczoru. Sekcja hero musi być ODWAŻNA.

Dodaj to zaraz po znaczniku <main>:

<!-- Hero Section -->
<section class="bg-brutal-yellow min-h-screen flex items-center justify-center px-6 py-20">
  <div class="max-w-6xl w-full">
    <div class="grid md:grid-cols-2 gap-12 items-center">
 
      <!-- Left Column - Text -->
      <div>
        <h1 class="font-display text-6xl md:text-8xl uppercase leading-none mb-6">
          Task Management That Doesn't Bore You to Death
        </h1>
        <p class="text-xl md:text-2xl font-bold mb-8 bg-brutal-white border-brutal shadow-brutal-lg p-6">
          Stop using the same gray dashboard as everyone else.
          BoldTask gives you project management with personality.
        </p>
 
        <!-- CTA Buttons -->
        <div class="flex flex-col sm:flex-row gap-4">
          <button class="bg-brutal-black text-brutal-yellow border-brutal shadow-brutal-lg
                         px-8 py-4 font-bold text-lg uppercase btn-brutal">
            Start Free Trial →
          </button>
          <button class="bg-brutal-white border-brutal shadow-brutal-lg
                         px-8 py-4 font-bold text-lg uppercase btn-brutal">
            Watch Demo
          </button>
        </div>
 
        <!-- Social Proof -->
        <div class="mt-12 flex items-center gap-8">
          <div class="text-center">
            <div class="text-4xl font-display">10K+</div>
            <div class="text-sm font-bold">Active Users</div>
          </div>
          <div class="h-12 w-1 bg-brutal-black"></div>
          <div class="text-center">
            <div class="text-4xl font-display">4.9★</div>
            <div class="text-sm font-bold">User Rating</div>
          </div>
          <div class="h-12 w-1 bg-brutal-black"></div>
          <div class="text-center">
            <div class="text-4xl font-display">24/7</div>
            <div class="text-sm font-bold">Support</div>
          </div>
        </div>
      </div>
 
      <!-- Right Column - Visual Element -->
      <div class="relative">
        <!-- Main Card -->
        <div class="bg-brutal-white border-brutal-thick shadow-brutal-xl p-8 relative z-10">
          <div class="bg-brutal-pink h-4 w-20 mb-4"></div>
          <div class="h-3 bg-brutal-gray mb-2"></div>
          <div class="h-3 bg-brutal-gray w-3/4 mb-6"></div>
 
          <!-- Task Items -->
          <div class="space-y-3">
            <div class="flex items-center gap-3 p-3 bg-brutal-yellow border-brutal">
              <div class="w-5 h-5 border-brutal bg-brutal-black"></div>
              <div class="h-2 bg-brutal-black w-full"></div>
            </div>
            <div class="flex items-center gap-3 p-3 bg-brutal-white border-brutal">
              <div class="w-5 h-5 border-brutal"></div>
              <div class="h-2 bg-brutal-gray w-4/5"></div>
            </div>
            <div class="flex items-center gap-3 p-3 bg-brutal-white border-brutal">
              <div class="w-5 h-5 border-brutal"></div>
              <div class="h-2 bg-brutal-gray w-3/4"></div>
            </div>
          </div>
        </div>
 
        <!-- Floating accent card -->
        <div class="absolute -bottom-8 -right-8 bg-brutal-cyan border-brutal-thick
                    shadow-brutal-lg p-6 w-40 text-center">
          <div class="text-3xl font-display mb-2">+47</div>
          <div class="text-xs font-bold">Tasks Done Today</div>
        </div>
      </div>
 
    </div>
  </div>
</section>

Co zbudowaliśmy:

Żółte tło na cały ekran (natychmiastowy efekt)
Ogromny nagłówek z Archivo Black
Kontener treści z grubą ramką i twardym cieniem
CTA z efektami hover (cień przesuwa się po najechaniu)
Metryki społecznego dowodu słuszności
Wizualny makieta produktu (abstrakcyjne przedstawienie)
Unoszącą się kartę akcentową dla głębi

Decyzje projektowe:

Żółte tło = wysoka energia, nie do zignorowania
Biały kontener treści = tworzy kontrast i hierarchię
Czarne CTA na żółtym = maksymalna widoczność
Unosząca się cyjanowa karta = dodaje asymetrii (neobrutalistyczna zasada)

Krok 5: sekcja funkcji (10 minut)

Zbudujmy karty funkcji. Dodaj to po sekcji hero:

<!-- Features Section -->
<section class="bg-brutal-white py-20 px-6">
  <div class="max-w-7xl mx-auto">
 
    <!-- Section Header -->
    <div class="text-center mb-16">
      <h2 class="font-display text-5xl md:text-7xl uppercase mb-6">
        Why BoldTask?
      </h2>
      <p class="text-xl md:text-2xl font-bold max-w-3xl mx-auto">
        Because your productivity tool shouldn't put you to sleep
      </p>
    </div>
 
    <!-- Feature Grid -->
    <div class="grid md:grid-cols-3 gap-8">
 
      <!-- Feature 1 -->
      <div class="bg-brutal-pink text-brutal-white border-brutal-thick shadow-brutal-lg p-8
                  hover:-translate-y-2 transition-transform">
        <div class="text-6xl font-display mb-4">⚡</div>
        <h3 class="font-display text-2xl uppercase mb-4">Lightning Fast</h3>
        <p class="font-bold">
          No lag. No loading. No waiting. Your tasks appear instantly
          because we don't bloat our code with unnecessary animations.
        </p>
      </div>
 
      <!-- Feature 2 -->
      <div class="bg-brutal-cyan border-brutal-thick shadow-brutal-lg p-8
                  hover:-translate-y-2 transition-transform">
        <div class="text-6xl font-display mb-4">🎨</div>
        <h3 class="font-display text-2xl uppercase mb-4">Actually Unique</h3>
        <p class="font-bold">
          Tired of boring dashboards? We built something you'll actually
          want to open. Bold colors, zero BS.
        </p>
      </div>
 
      <!-- Feature 3 -->
      <div class="bg-brutal-yellow border-brutal-thick shadow-brutal-lg p-8
                  hover:-translate-y-2 transition-transform">
        <div class="text-6xl font-display mb-4">🔒</div>
        <h3 class="font-display text-2xl uppercase mb-4">Privacy First</h3>
        <p class="font-bold">
          Your data stays yours. No tracking. No selling. No corporate
          surveillance. Just your tasks, secured.
        </p>
      </div>
 
      <!-- Feature 4 -->
      <div class="bg-brutal-white border-brutal-thick shadow-brutal-lg p-8
                  hover:-translate-y-2 transition-transform">
        <div class="text-6xl font-display mb-4">📱</div>
        <h3 class="font-display text-2xl uppercase mb-4">Mobile Ready</h3>
        <p class="font-bold">
          Works on your phone, tablet, or desktop. Same bold design,
          same fast performance everywhere.
        </p>
      </div>
 
      <!-- Feature 5 -->
      <div class="bg-brutal-white border-brutal-thick shadow-brutal-lg p-8
                  hover:-translate-y-2 transition-transform">
        <div class="text-6xl font-display mb-4">🤝</div>
        <h3 class="font-display text-2xl uppercase mb-4">Team Friendly</h3>
        <p class="font-bold">
          Invite your team. Assign tasks. Track progress. All without
          the corporate bloat of "enterprise" tools.
        </p>
      </div>
 
      <!-- Feature 6 -->
      <div class="bg-brutal-white border-brutal-thick shadow-brutal-lg p-8
                  hover:-translate-y-2 transition-transform">
        <div class="text-6xl font-display mb-4">💰</div>
        <h3 class="font-display text-2xl uppercase mb-4">Fair Pricing</h3>
        <p class="font-bold">
          No hidden fees. No "contact sales." Just honest pricing that
          makes sense. Pay for what you use.
        </p>
      </div>
 
    </div>
  </div>
</section>

Co zbudowaliśmy:

6 kart funkcji w responsywnej siatce
Color blocking (róż, cyjan, żółć, biel) dla wizualnego interesu
Ikony emoji (proste, zabawne, spójne z marką)
Efekt hover (karty unoszą się po najechaniu)
Spójne grube ramki i twarde cienie

Wzorzec projektowy: Zauważasz, jak pierwsze trzy karty używają kolorów akcentowych (róż, cyjan, żółć), a dolne trzy są białe? To tworzy hierarchię wizualną: górny rząd przyciąga więcej uwagi.

Krok 6: sekcja cennika (12 minut)

Tabele cenowe są kluczowe. Zróbmy je nie do przeoczenia:

<!-- Pricing Section -->
<section id="pricing" class="bg-brutal-black text-brutal-white py-20 px-6">
  <div class="max-w-7xl mx-auto">
 
    <!-- Section Header -->
    <div class="text-center mb-16">
      <h2 class="font-display text-5xl md:text-7xl uppercase mb-6">
        Simple Pricing
      </h2>
      <p class="text-xl md:text-2xl font-bold max-w-2xl mx-auto">
        No tricks. No hidden costs. Just pick a plan and start shipping.
      </p>
    </div>
 
    <!-- Pricing Grid -->
    <div class="grid md:grid-cols-3 gap-8">
 
      <!-- Free Plan -->
      <div class="bg-brutal-white text-brutal-black border-brutal-thick shadow-brutal-lg p-8">
        <div class="mb-6">
          <div class="text-sm font-bold uppercase mb-2 text-gray-600">For Individuals</div>
          <h3 class="font-display text-4xl uppercase mb-4">Free</h3>
          <div class="text-5xl font-display mb-2">$0</div>
          <div class="text-sm font-bold text-gray-600">Forever free</div>
        </div>
 
        <ul class="space-y-3 mb-8">
          <li class="flex items-start gap-3">
            <span class="text-brutal-yellow text-xl">✓</span>
            <span class="font-bold">Up to 10 projects</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-yellow text-xl">✓</span>
            <span class="font-bold">Unlimited tasks</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-yellow text-xl">✓</span>
            <span class="font-bold">Mobile apps</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-gray-400 text-xl">✗</span>
            <span class="font-bold text-gray-400">Team collaboration</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-gray-400 text-xl">✗</span>
            <span class="font-bold text-gray-400">Priority support</span>
          </li>
        </ul>
 
        <button class="w-full bg-brutal-white border-brutal shadow-brutal
                       px-6 py-3 font-bold uppercase btn-brutal">
          Start Free
        </button>
      </div>
 
      <!-- Pro Plan (Highlighted) -->
      <div class="bg-brutal-yellow text-brutal-black border-brutal-thick shadow-brutal-xl p-8
                  relative transform md:-translate-y-4">
        <!-- Popular Badge -->
        <div class="absolute -top-4 left-1/2 -translate-x-1/2 bg-brutal-pink text-brutal-white
                    border-brutal px-6 py-2 font-bold uppercase text-sm">
          Most Popular
        </div>
 
        <div class="mb-6 mt-4">
          <div class="text-sm font-bold uppercase mb-2">For Professionals</div>
          <h3 class="font-display text-4xl uppercase mb-4">Pro</h3>
          <div class="text-5xl font-display mb-2">$12</div>
          <div class="text-sm font-bold">Per month</div>
        </div>
 
        <ul class="space-y-3 mb-8">
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Unlimited projects</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Unlimited tasks</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Mobile apps</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Team collaboration (5 members)</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Priority support</span>
          </li>
        </ul>
 
        <button class="w-full bg-brutal-black text-brutal-yellow border-brutal shadow-brutal-lg
                       px-6 py-3 font-bold uppercase btn-brutal">
          Get Pro →
        </button>
      </div>
 
      <!-- Team Plan -->
      <div class="bg-brutal-cyan text-brutal-black border-brutal-thick shadow-brutal-lg p-8">
        <div class="mb-6">
          <div class="text-sm font-bold uppercase mb-2">For Teams</div>
          <h3 class="font-display text-4xl uppercase mb-4">Team</h3>
          <div class="text-5xl font-display mb-2">$29</div>
          <div class="text-sm font-bold">Per month</div>
        </div>
 
        <ul class="space-y-3 mb-8">
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Everything in Pro</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Unlimited team members</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Advanced analytics</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Custom integrations</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">24/7 priority support</span>
          </li>
        </ul>
 
        <button class="w-full bg-brutal-black text-brutal-cyan border-brutal shadow-brutal
                       px-6 py-3 font-bold uppercase btn-brutal">
          Get Team
        </button>
      </div>
 
    </div>
 
    <!-- Money Back Guarantee -->
    <div class="mt-16 text-center">
      <div class="inline-block bg-brutal-yellow text-brutal-black border-brutal-thick
                  shadow-brutal-lg px-8 py-4 font-bold text-lg">
        💰 30-Day Money Back Guarantee - No Questions Asked
      </div>
    </div>
 
  </div>
</section>

Co zbudowaliśmy:

Trzy poziomy cenowe z wyraźnym rozróżnieniem
Kodowanie kolorem (biel = darmowy, żółć = popularny, cyjan = premium)
Środkową kartę uniesioną i większą (kieruje uwagę na rekomendowany plan)
Odznakę „Most Popular” na planie Pro
Ptaszki funkcji (✓ i ✗) dla przejrzystości
Gwarancję zwrotu pieniędzy dla zaufania

Strategia projektowa:

Czarne tło sprawia, że kolorowe karty WYBIJAJĄ SIĘ
Lekko uniesiona środkowa karta tworzy hierarchię wizualną
Spójne umieszczenie CTA ułatwia porównanie
Różnokolorowe CTA pasują do tła swojej karty

Krok 7: sekcja z opiniami (8 minut)

Społeczny dowód słuszności sprzedaje. Dodajmy opinie:

<!-- Testimonial Section -->
<section class="bg-brutal-gray py-20 px-6">
  <div class="max-w-7xl mx-auto">
 
    <!-- Section Header -->
    <div class="text-center mb-16">
      <h2 class="font-display text-5xl md:text-7xl uppercase mb-6">
        People Love It
      </h2>
      <p class="text-xl md:text-2xl font-bold max-w-2xl mx-auto">
        Don't take our word for it. Here's what actual users say.
      </p>
    </div>
 
    <!-- Testimonials Grid -->
    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
 
      <!-- Testimonial 1 -->
      <div class="bg-brutal-white border-brutal shadow-brutal-lg p-6">
        <div class="text-brutal-yellow text-2xl mb-4">★★★★★</div>
        <p class="font-bold mb-6 text-lg">
          "Finally, a task manager that doesn't look like it was designed
          by accountants. BoldTask actually makes me WANT to check my tasks."
        </p>
        <div class="flex items-center gap-3">
          <div class="w-12 h-12 bg-brutal-pink border-brutal"></div>
          <div>
            <div class="font-bold">Sarah Chen</div>
            <div class="text-sm text-gray-600">Product Designer</div>
          </div>
        </div>
      </div>
 
      <!-- Testimonial 2 -->
      <div class="bg-brutal-white border-brutal shadow-brutal-lg p-6">
        <div class="text-brutal-yellow text-2xl mb-4">★★★★★</div>
        <p class="font-bold mb-6 text-lg">
          "I switched from Asana and never looked back. BoldTask is faster,
          cleaner, and way more fun to use. Plus it's actually affordable."
        </p>
        <div class="flex items-center gap-3">
          <div class="w-12 h-12 bg-brutal-cyan border-brutal"></div>
          <div>
            <div class="font-bold">Marcus Rodriguez</div>
            <div class="text-sm text-gray-600">Startup Founder</div>
          </div>
        </div>
      </div>
 
      <!-- Testimonial 3 -->
      <div class="bg-brutal-white border-brutal shadow-brutal-lg p-6">
        <div class="text-brutal-yellow text-2xl mb-4">★★★★★</div>
        <p class="font-bold mb-6 text-lg">
          "Our whole team uses it now. The bold design actually helps us
          stay focused. Weird but true."
        </p>
        <div class="flex items-center gap-3">
          <div class="w-12 h-12 bg-brutal-yellow border-brutal"></div>
          <div>
            <div class="font-bold">Priya Kapoor</div>
            <div class="text-sm text-gray-600">Engineering Manager</div>
          </div>
        </div>
      </div>
 
    </div>
  </div>
</section>

Co zbudowaliśmy:

Trzy karty opinii ze spójnym stylem
Oceny w gwiazdkach (żółć = uwaga)
Awatary użytkowników (abstrakcyjne kolorowe kwadraty zamiast zdjęć)
Imiona i tytuły dla wiarygodności

Dlaczego abstrakcyjne awatary? Prawdziwe zdjęcia mogą sprawiać korporacyjne wrażenie. Kolorowe kwadraty zachowują zabawną, geometryczną neobrutalistyczną estetykę.

Krok 8: stopka (5 minut)

Każda strona potrzebuje stopki. Zróbmy naszą z pazurem:

<!-- Footer -->
<footer class="bg-brutal-black text-brutal-white border-t-4 border-brutal-white py-12 px-6">
  <div class="max-w-7xl mx-auto">
 
    <div class="grid md:grid-cols-4 gap-12 mb-12">
 
      <!-- Brand -->
      <div>
        <div class="font-display text-3xl mb-4">BoldTask</div>
        <p class="font-bold text-gray-300">
          Project management that doesn't suck.
        </p>
      </div>
 
      <!-- Product Links -->
      <div>
        <h4 class="font-display text-lg uppercase mb-4">Product</h4>
        <ul class="space-y-2">
          <li><a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Features</a></li>
          <li><a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Pricing</a></li>
          <li><a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Roadmap</a></li>
          <li><a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Changelog</a></li>
        </ul>
      </div>
 
      <!-- Company Links -->
      <div>
        <h4 class="font-display text-lg uppercase mb-4">Company</h4>
        <ul class="space-y-2">
          <li><a href="#" class="font-bold hover:text-brutal-yellow transition-colors">About</a></li>
          <li><a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Blog</a></li>
          <li><a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Careers</a></li>
          <li><a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Contact</a></li>
        </ul>
      </div>
 
      <!-- Newsletter -->
      <div>
        <h4 class="font-display text-lg uppercase mb-4">Stay Updated</h4>
        <p class="font-bold mb-4 text-gray-300">Get updates about new features.</p>
        <div class="flex gap-2">
          <input
            type="email"
            placeholder="Your email"
            class="flex-1 bg-brutal-white text-brutal-black border-brutal px-4 py-2
                   font-bold placeholder:text-gray-400"
          />
          <button class="bg-brutal-yellow text-brutal-black border-brutal shadow-brutal
                         px-4 py-2 font-bold uppercase btn-brutal">
            →
          </button>
        </div>
      </div>
 
    </div>
 
    <!-- Bottom Bar -->
    <div class="border-t-2 border-gray-700 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
      <div class="font-bold text-gray-400">
        © 2026 BoldTask. All rights reserved.
      </div>
      <div class="flex gap-6">
        <a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Privacy</a>
        <a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Terms</a>
        <a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Twitter</a>
        <a href="#" class="font-bold hover:text-brutal-yellow transition-colors">GitHub</a>
      </div>
    </div>
 
  </div>
</footer>

Co zbudowaliśmy:

Układ stopki w czterech kolumnach
Markę, nawigację i zapis do newslettera
Efekty hover (linki robią się żółte)
Pole email w brutalnym stylu
Dolny pasek z prawami autorskimi

Krok 9: dodanie szlifu i interakcji (5 minut)

Dodajmy kilka ostatnich akcentów, żeby strona sprawiała dopracowane wrażenie.

Płynne przewijanie

Dodaj to do swojego src/styles.css:

/* Smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
}
 
/* Custom scrollbar (optional but on-brand) */
::-webkit-scrollbar {
  width: 12px;
}
 
::-webkit-scrollbar-track {
  background: var(--color-brutal-gray);
}
 
::-webkit-scrollbar-thumb {
  background: var(--color-brutal-black);
  border: 2px solid var(--color-brutal-gray);
}
 
::-webkit-scrollbar-thumb:hover {
  background: var(--color-brutal-yellow);
}

Dodaj ten JavaScript przed zamykającym znacznikiem </body>:

<script>
  // Mobile menu toggle
  const mobileMenuButton = document.createElement('button');
  mobileMenuButton.className = 'md:hidden border-brutal bg-brutal-yellow px-4 py-2 font-bold';
  mobileMenuButton.textContent = 'MENU';
 
  const nav = document.querySelector('nav > div');
  const navLinks = nav.querySelector('.hidden');
 
  // This is a simple example - you'd want to make this more robust
  mobileMenuButton.addEventListener('click', () => {
    navLinks.classList.toggle('hidden');
    navLinks.classList.toggle('flex');
  });
 
  // Add button to nav (you'd do this more elegantly in production)
</script>

Optymalizacja wydajności

Dodaj te znaczniki meta do swojego <head>:

<!-- Preload critical fonts -->
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;700&display=swap">
 
<!-- Meta tags for SEO and social -->
<meta name="description" content="BoldTask - Project management that doesn't suck. Bold design, fast performance, fair pricing.">
<meta property="og:title" content="BoldTask - Project Management That Doesn't Suck">
<meta property="og:description" content="Stop using boring task managers. BoldTask gives you project management with personality.">
<meta property="og:image" content="/og-image.png">
<meta name="twitter:card" content="summary_large_image">

Krok 10: testy i poprawki (5 minut)

Teraz przetestuj swoją stronę:

Testy responsywności

Otwórz DevTools (F12) i przetestuj te breakpointy:

Mobilny (375px)
Tablet (768px)
Desktop (1280px)

Upewnij się, że:

tekst jest czytelny w każdym rozmiarze
przyciski da się dotknąć na mobilnym (co najmniej 44px wysokości)
układy siatki zwijają się poprawnie
cienie nie są ucinane na małych ekranach

Sprawdzenie dostępności

Przejdź przez tę listę kontrolną:

Wszystkie elementy interaktywne są dostępne z klawiatury (przejdź przez stronę Tabem)
Kontrast kolorów spełnia standardy WCAG AA (czerń na bieli ✓, żółć na bieli ✓)
Obrazy mają tekst alternatywny (tutaj użyliśmy divów, ale jeśli dodasz obrazy, dodaj alt)
Pola formularzy mają etykiety
Stany focus są widoczne

Sprawdzenie wydajności

Otwórz Lighthouse w Chrome DevTools i uruchom audyt. Powinieneś zobaczyć:

Wydajność: 90+ (mało CSS, brak ciężkich frameworków)
Dostępność: 90+ (wysoki kontrast, semantyczny HTML)
Najlepsze praktyki: 90+
SEO: 90+

Jeśli wyniki są niskie, oto częste poprawki:

Dodaj width i height do obrazów
Zminifikuj CSS na produkcji
Włącz nagłówki cache'owania
Skompresuj obrazy

Bonus: przejście na React/Next.js

Chcesz użyć tego w aplikacji React? Oto jak przekonwertować sekcję hero:

// components/Hero.tsx
export default function Hero() {
  return (
    <section className="bg-brutal-yellow min-h-screen flex items-center justify-center px-6 py-20">
      <div className="max-w-6xl w-full">
        <div className="grid md:grid-cols-2 gap-12 items-center">
 
          {/* Left Column */}
          <div>
            <h1 className="font-display text-6xl md:text-8xl uppercase leading-none mb-6">
              Task Management That Doesn't Bore You to Death
            </h1>
            <p className="text-xl md:text-2xl font-bold mb-8 bg-brutal-white border-brutal shadow-brutal-lg p-6">
              Stop using the same gray dashboard as everyone else.
              BoldTask gives you project management with personality.
            </p>
 
            <div className="flex flex-col sm:flex-row gap-4">
              <button className="bg-brutal-black text-brutal-yellow border-brutal shadow-brutal-lg
                               px-8 py-4 font-bold text-lg uppercase btn-brutal">
                Start Free Trial →
              </button>
              <button className="bg-brutal-white border-brutal shadow-brutal-lg
                               px-8 py-4 font-bold text-lg uppercase btn-brutal">
                Watch Demo
              </button>
            </div>
 
            {/* Social Proof */}
            <div className="mt-12 flex items-center gap-8">
              <div className="text-center">
                <div className="text-4xl font-display">10K+</div>
                <div className="text-sm font-bold">Active Users</div>
              </div>
              <div className="h-12 w-1 bg-brutal-black"></div>
              <div className="text-center">
                <div className="text-4xl font-display">4.9★</div>
                <div className="text-sm font-bold">User Rating</div>
              </div>
            </div>
          </div>
 
          {/* Right Column - Visual */}
          <div className="relative">
            <div className="bg-brutal-white border-brutal-thick shadow-brutal-xl p-8 relative z-10">
              {/* Task mockup */}
              <div className="bg-brutal-pink h-4 w-20 mb-4"></div>
              <div className="h-3 bg-brutal-gray mb-2"></div>
              <div className="h-3 bg-brutal-gray w-3/4 mb-6"></div>
 
              <div className="space-y-3">
                <div className="flex items-center gap-3 p-3 bg-brutal-yellow border-brutal">
                  <div className="w-5 h-5 border-brutal bg-brutal-black"></div>
                  <div className="h-2 bg-brutal-black w-full"></div>
                </div>
                <div className="flex items-center gap-3 p-3 bg-brutal-white border-brutal">
                  <div className="w-5 h-5 border-brutal"></div>
                  <div className="h-2 bg-brutal-gray w-4/5"></div>
                </div>
              </div>
            </div>
 
            <div className="absolute -bottom-8 -right-8 bg-brutal-cyan border-brutal-thick
                          shadow-brutal-lg p-6 w-40 text-center">
              <div className="text-3xl font-display mb-2">+47</div>
              <div className="text-xs font-bold">Tasks Done Today</div>
            </div>
          </div>
 
        </div>
      </div>
    </section>
  );
}

Następnie w swoim tailwind.config.ts:

import type { Config } from 'tailwindcss'
 
const config: Config = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-space-grotesk)', 'sans-serif'],
        display: ['var(--font-archivo-black)', 'sans-serif'],
      },
      colors: {
        'brutal-yellow': '#ffdb33',
        'brutal-pink': '#ff006e',
        'brutal-cyan': '#00f0ff',
        'brutal-black': '#000000',
        'brutal-white': '#ffffff',
        'brutal-gray': '#e5e5e5',
      },
      boxShadow: {
        'brutal-sm': '2px 2px 0 0 #000',
        'brutal': '4px 4px 0 0 #000',
        'brutal-lg': '6px 6px 0 0 #000',
        'brutal-xl': '8px 8px 0 0 #000',
      },
      borderWidth: {
        'brutal': '4px',
        'brutal-thick': '6px',
      },
    },
  },
  plugins: [],
}
 
export default config

Częste błędy i jak ich unikać

Po zbudowaniu dziesiątek neobrutalistycznych stron oto pułapki, które widzę najczęściej:

1. Niespójne grubości ramek

Błąd: Ramki 2px na jednych elementach, 5px na innych, 3px gdzie indziej.

Rozwiązanie: Wybierz 2-3 grubości ramek (np. 3px standardowo, 4px do wyróżnień, 6px do głównych elementów) i trzymaj się ich od początku do końca.

2. Zapominanie o przesunięciach cieni na mobilnych

Błąd: Przesunięcia cieni 10px na mobilnych, które są ucinane albo powodują poziome przewijanie.

Rozwiązanie: Używaj responsywnych narzędzi do cieni:

.card {
  box-shadow: 4px 4px 0 0 #000;
}
 
@media (min-width: 768px) {
  .card {
    box-shadow: 8px 8px 0 0 #000;
  }
}

3. Zbyt wiele kolorów akcentowych

Błąd: Używanie 5 lub więcej kolorów z myślą „więcej = bardziej brutalnie”.

Rozwiązanie: Trzymaj się czerni + bieli + maksymalnie 2-3 kolorów akcentowych. Nasza paleta używa żółci, różu i cyjanu, i to już jest na granicy.

4. Zaniedbywanie dostępności

Błąd: Żółty tekst na białym tle (nieczytelny), brak stanów focus, słaby kontrast.

Rozwiązanie: Zawsze testuj kontrast. Używaj czarnego tekstu na żółtych/białych tłach, białego tekstu na czarnych/ciemnych tłach.

5. Wkradające się miękkie cienie

Błąd: Przypadkowe użycie domyślnych cieni Tailwind (shadow-lg), które mają rozmycie.

Rozwiązanie: Twórz własne narzędzia do cieni i w razie potrzeby wyłącz domyślne cienie.

Kolejne kroki i zasoby

Gratulacje. Właśnie zbudowałeś kompletną neobrutalistyczną stronę od zera.

Co robić dalej

1. Wdróż ją

# Build for production
npm run build
 
# Deploy to Vercel, Netlify, or wherever

2. Dodaj funkcjonalność

Podłącz formularz newslettera do usługi (ConvertKit, Mailchimp)
Zaimplementuj CTA cennika ze Stripe
Dodaj analitykę (Plausible, Fathom)

3. Rozbuduj design system

Stwórz więcej komponentów (modale, listy rozwijane, tooltipy)
Zbuduj dodatkowe strony (o nas, blog, kontakt)
Dodaj tryb ciemny (neobrutalizm świetnie działa też w trybie ciemnym)

4. Optymalizuj dalej

Zminifikuj CSS i HTML
Dodaj optymalizację obrazów
Wdróż strategie cache'owania
Rozważ generator stron statycznych dla jeszcze lepszej wydajności

Przydatne zasoby

Inspiracja projektowa:

Brutalist Websites - Wyselekcjonowana kolekcja
Gumroad - Neobrutalizm zrobiony dobrze
Feastables - Zabawny neobrutalistyczny e-commerce

Narzędzia:

Neobrutalism - Gotowe neobrutalistyczne komponenty
Tailwind CSS v4 Docs - Oficjalna dokumentacja
Google Fonts - Darmowe czcionki (Archivo Black, Space Grotesk)

Generatory palet kolorów:

Coolors - Generowanie schematów kolorów
Adobe Color - Koło barw i narzędzia do palet

Przemyślenia na koniec

Właśnie zbudowałeś neobrutalistyczną stronę, od zera do wdrożenia, w niecałą godzinę. To całkiem imponujące.

Najważniejsze wnioski:

Neobrutalizm = grube ramki + twarde cienie + odważne kolory + zero border-radius
Dyrektywa @theme z Tailwind v4 czyni personalizację czystszą
Spójność jest kluczowa (grubości ramek, cienie, kolory)
Dostępność wciąż ma znaczenie (wysoki kontrast pomaga)
Zacznij od solidnego design systemu, potem buduj komponenty

Ta strona to nie tylko demo: to szablon, który możesz dostosować do realnych projektów. Zmień kolory, podmień czcionki, dostrój cienie, uczyń go swoim.

Co najlepsze w neobrutalizmie? Jest wyrozumiały. Niedoskonałość jest częścią estetyki. Ta lekko przesunięta ramka albo element odrobinę poza środkiem? To nie bug, to charakter.

A teraz idź i zbuduj coś odważnego, co nie wygląda jak portfolio/SaaS/landing page każdego innego.

A jeśli chcesz gotowych komponentów, żeby iść jeszcze szybciej, zajrzyj do Neobrutalism. To ta estetyka, zapakowana w komponenty do kopiowania i wklejania.

Udanego budowania. 🚀

Masz pytania? Zostaw komentarz albo odezwij się na Twitterze. Uwielbiam patrzeć, co ludzie budują w tym stylu.

Chcesz cały kod? Kompletny plik HTML jest dostępny jako GitHub Gist (link w komentarzach).

Uznałeś to za pomocne? Podziel się z programistą, który musi wyrwać się z pułapki nudnego designu.

← Wróć do artykułów

Jak zbudować neobrutalistyczną stronę z Tailwind CSS v4 (krok po kroku)

Co budujemy

Krok 1: przygotowanie projektu (5 minut)

Stwórz swój projekt

Zainicjuj npm i zainstaluj Tailwind v4

Stwórz strukturę projektu

Krok 2: konfiguracja Tailwind v4 (3 minuty)

Stwórz plik ze stylami

Krok 3: struktura HTML (5 minut)

Skonfiguruj serwer deweloperski

Krok 4: budowa sekcji hero (10 minut)

Krok 5: sekcja funkcji (10 minut)

Krok 6: sekcja cennika (12 minut)

Krok 7: sekcja z opiniami (8 minut)

Krok 8: stopka (5 minut)

Krok 9: dodanie szlifu i interakcji (5 minut)

Płynne przewijanie

Przełącznik menu mobilnego

Optymalizacja wydajności

Krok 10: testy i poprawki (5 minut)

Testy responsywności

Sprawdzenie dostępności

Sprawdzenie wydajności

Bonus: przejście na React/Next.js

Częste błędy i jak ich unikać

1. Niespójne grubości ramek

2. Zapominanie o przesunięciach cieni na mobilnych

3. Zbyt wiele kolorów akcentowych

4. Zaniedbywanie dostępności

5. Wkradające się miękkie cienie

Kolejne kroki i zasoby

Co robić dalej

Przydatne zasoby

Przemyślenia na koniec

20 neobrutalistycznych palet kolorów z kodami hex (gotowe do skopiowania i wklejenia)

Jak przekształcić dowolny projekt React w neobrutalizm w 10 minut

Neobrutalizm vs. minimalizm: kiedy używać którego (i kiedy nie)

Jak zbudować neobrutalistyczną stronę z Tailwind CSS v4 (krok po kroku)

Co budujemy

Krok 1: przygotowanie projektu (5 minut)

Stwórz swój projekt

Zainicjuj npm i zainstaluj Tailwind v4

Stwórz strukturę projektu

Krok 2: konfiguracja Tailwind v4 (3 minuty)

Stwórz plik ze stylami

Krok 3: struktura HTML (5 minut)

Skonfiguruj serwer deweloperski

Krok 4: budowa sekcji hero (10 minut)

Krok 5: sekcja funkcji (10 minut)

Krok 6: sekcja cennika (12 minut)

Krok 7: sekcja z opiniami (8 minut)

Krok 8: stopka (5 minut)

Krok 9: dodanie szlifu i interakcji (5 minut)

Płynne przewijanie

Przełącznik menu mobilnego

Optymalizacja wydajności

Krok 10: testy i poprawki (5 minut)

Testy responsywności

Sprawdzenie dostępności

Sprawdzenie wydajności

Bonus: przejście na React/Next.js

Częste błędy i jak ich unikać

1. Niespójne grubości ramek

2. Zapominanie o przesunięciach cieni na mobilnych

3. Zbyt wiele kolorów akcentowych

4. Zaniedbywanie dostępności

5. Wkradające się miękkie cienie

Kolejne kroki i zasoby

Co robić dalej

Przydatne zasoby

Przemyślenia na koniec

Podobne artykuły

20 neobrutalistycznych palet kolorów z kodami hex (gotowe do skopiowania i wklejenia)

Jak przekształcić dowolny projekt React w neobrutalizm w 10 minut

Neobrutalizm vs. minimalizm: kiedy używać którego (i kiedy nie)