1 mei 2026

tailwind css neobrutalisme tutorial webontwikkeling css

Hoe je een neobrutalistische website bouwt met Tailwind CSS v4 (stap voor stap)

Leer hoe je een complete neobrutalistische website vanaf nul bouwt met Tailwind CSS v4. Deze praktische tutorial loodst je door de installatie, configuratie en bouw van elk component, met codevoorbeelden die je kunt kopiëren en plakken.

Dov Azencot

@DovAzencot

Deel op X

Oké, developers. Laten we iets gedurfds bouwen.

Geen theorie. Geen opvulling. Alleen jij, ik en een terminal. Aan het eind van deze tutorial heb je een volledig werkende neobrutalistische website, gebouwd met Tailwind CSS v4.

We hebben het over:

Dikke zwarte randen
Harde slagschaduwen
Accenten in elektrisch geel
Stevige typografie
Nul afgeronde hoeken

Dit is geen tutorial in de trant van „hier is een component”. We bouwen een hele landingspagina vanaf nul: hero-sectie, features, prijzen, footer, de hele mikmak. Elke regel code uitgelegd. Elke ontwerpkeuze onderbouwd.

Pak je koffie. Open je terminal. Laten we bruut worden.

Wat we bouwen

Voordat we beginnen, dit is wat we maken:

Een landingspagina voor een fictief SaaS-product genaamd „BoldTask”: een tool voor projectmanagement die er niet uitziet als elke andere tool voor projectmanagement.

De pagina bevat:

Een hero-sectie met CTA
Feature-kaarten
Een prijstabel
Een sectie met reviews
Een footer

Allemaal met die kenmerkende neobrutalistische esthetiek: gedurfd, contrastrijk en onmogelijk te negeren.

Tech-stack:

Tailwind CSS v4 (het nieuwste van het nieuwste)
HTML (of React/Next.js als je dat liever hebt)
Google Fonts (Archivo Black + Space Grotesk)

Geschatte tijd: 45-60 minuten als je meedoet

Stap 1: project opzetten (5 minuten)

Laten we vanaf nul beginnen. Ik gebruik in deze tutorial een simpele HTML-opzet, maar je kunt hem moeiteloos aanpassen aan React, Next.js of welk framework dan ook.

Maak je project

mkdir neobrutalism-website
cd neobrutalism-website

Initialiseer npm en installeer Tailwind v4

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

Let op: we installeren Tailwind v4 (momenteel in beta, maar al stabiel genoeg voor productie). De tag @next geeft je v4.

Maak de projectstructuur

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

Je mappenstructuur zou er zo uit moeten zien:

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

Stap 2: Tailwind v4 configureren (3 minuten)

Tailwind v4 komt met een nieuw, opgeruimder configuratiesysteem. In plaats van tailwind.config.js configureer je nu alles in CSS.

Maak je stijlbestand

Open src/styles.css en voeg toe:

@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);
}

Wat we zojuist deden:

Een eigen kleurenpalet opgezet (zwart, wit, geel, roze, cyaan)
Alle border-radius-waarden op nul gezet (neobrutalisme = scherpe randen)
Utilities voor harde schaduwen gemaakt (verschoven, zonder blur)
Eigen hover-effecten voor knoppen toegevoegd die het „indrukken” van de schaduw nabootsen

Stap 3: HTML-structuur (5 minuten)

Maak de basis-HTML-structuur. Open 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>

Zet de dev-server op

We hebben een manier nodig om ons werk te bekijken. Laten we Vite gebruiken:


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

Voeg dit script toe aan je package.json:

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

Draai nu:


pnpm dev
npm run dev
yarn dev
bun dev

Open http://localhost:5173 in je browser. Je zou een basisnavigatiebalk met de BoldTask-branding moeten zien.

Stap 4: de hero-sectie bouwen (10 minuten)

Nu de ster van de show. De hero-sectie moet GEDURFD zijn.

Voeg dit toe direct na de <main>-tag:

<!-- 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>

Wat we bouwden:

Een gele achtergrond op het volledige scherm (directe impact)
Een enorme kop met Archivo Black
Een contentblok met dikke rand en harde schaduw
CTA's met hover-effecten (de schaduw verschuift bij hover)
Metrics voor social proof
Een visuele mock-up van het product (abstracte weergave)
Een zwevende accentkaart voor diepte

Ontwerpkeuzes:

Gele achtergrond = hoge energie, onmogelijk te negeren
Wit contentblok = creëert contrast en hiërarchie
Zwarte CTA op geel = maximale zichtbaarheid
Zwevende cyaankaart = voegt asymmetrie toe (een neobrutalistisch principe)

Stap 5: feature-sectie (10 minuten)

Laten we de feature-kaarten bouwen. Voeg dit toe na de hero-sectie:

<!-- 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>

Wat we bouwden:

6 feature-kaarten in een responsief grid
Color blocking (roze, cyaan, geel, wit) voor visuele interesse
Emoji-iconen (simpel, speels, on-brand)
Hover-effect (kaarten komen omhoog bij hover)
Consistent dikke randen en harde schaduwen

Ontwerppatroon: Zie je hoe de eerste drie kaarten accentkleuren gebruiken (roze, cyaan, geel) terwijl de onderste drie wit zijn? Dat creëert een visuele hiërarchie: de bovenste rij krijgt meer aandacht.

Stap 6: prijssectie (12 minuten)

Prijstabellen zijn cruciaal. Laten we ze onmogelijk te missen maken:

<!-- 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>

Wat we bouwden:

Drie prijsniveaus met een duidelijk onderscheid
Kleurcodering (wit = gratis, geel = populair, cyaan = premium)
De middelste kaart omhoog en groter (trekt de aandacht naar het aanbevolen plan)
Een „Most Popular”-badge op het Pro-plan
Vinkjes bij features (✓ en ✗) voor duidelijkheid
Een niet-goed-geld-teruggarantie voor vertrouwen

Ontwerpstrategie:

De zwarte achtergrond laat de gekleurde kaarten OPVALLEN
De iets omhooggeplaatste middelste kaart creëert visuele hiërarchie
Consistente plaatsing van de CTA maakt vergelijken makkelijk
Verschillend gekleurde CTA's passen bij de achtergrond van hun kaart

Stap 7: sectie met reviews (8 minuten)

Social proof verkoopt. Laten we reviews toevoegen:

<!-- 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>

Wat we bouwden:

Drie review-kaarten met een consistente stijl
Sterbeoordelingen (geel = aandacht)
Avatars van gebruikers (abstracte gekleurde vierkanten in plaats van foto's)
Namen en functies voor geloofwaardigheid

Waarom abstracte avatars? Echte foto's kunnen corporate aanvoelen. Gekleurde vierkanten behouden de speelse, geometrische neobrutalistische esthetiek.

Stap 8: footer (5 minuten)

Elke website heeft een footer nodig. Laten we de onze karakter geven:

<!-- 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>

Wat we bouwden:

Een footer-layout met vier kolommen
Merk, navigatie en aanmelding voor de nieuwsbrief
Hover-effecten (links worden geel)
Een e-mailveld in brutale stijl
Een copyrightbalk onderaan

Stap 9: glans en interacties toevoegen (5 minuten)

Laten we een paar laatste details toevoegen zodat de site verzorgd aanvoelt.

Vloeiend scrollen

Voeg dit toe aan je 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);
}

Voeg deze JavaScript toe vóór de afsluitende </body>-tag:

<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>

Prestatie-optimalisatie

Voeg deze meta-tags toe aan je <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">

Stap 10: testen en bijschaven (5 minuten)

Test nu je site:

Responsiviteitstest

Open DevTools (F12) en test deze breakpoints:

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

Zorg dat:

de tekst leesbaar is in elk formaat
de knoppen op mobiel aan te tikken zijn (minstens 44px hoog)
de grid-layouts correct inklappen
de schaduwen niet worden afgesneden op kleine schermen

Toegankelijkheidscheck

Loop deze checklist door:

Alle interactieve elementen zijn bereikbaar met het toetsenbord (loop met Tab door de pagina)
Het kleurcontrast voldoet aan de WCAG AA-normen (zwart op wit ✓, geel op wit ✓)
Afbeeldingen hebben alt-tekst (hier gebruikten we divs, maar als je afbeeldingen toevoegt, voeg dan alt toe)
Formuliervelden hebben labels
Focus-states zijn zichtbaar

Prestatiecheck

Open Lighthouse in Chrome DevTools en voer een audit uit. Je zou moeten zien:

Prestaties: 90+ (weinig CSS, geen zware frameworks)
Toegankelijkheid: 90+ (hoog contrast, semantische HTML)
Best practices: 90+
SEO: 90+

Als de scores laag zijn, de meest voorkomende oplossingen:

Voeg width en height toe aan afbeeldingen
Minify de CSS in productie
Zet caching-headers aan
Comprimeer de afbeeldingen

Bonus: overstappen naar React/Next.js

Wil je dit in een React-app gebruiken? Zo converteer je de hero-sectie:

// 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>
  );
}

Vervolgens in je 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

Veelvoorkomende fouten en hoe je ze voorkomt

Na het bouwen van tientallen neobrutalistische sites zijn dit de valkuilen die ik het vaakst zie:

1. Inconsistente randdiktes

De fout: Randen van 2px op sommige elementen, 5px op andere, 3px ergens anders.

De oplossing: Kies 2-3 randdiktes (bijv. 3px standaard, 4px voor nadruk, 6px voor hoofdelementen) en houd je daar van begin tot eind aan.

2. Schaduwverschuivingen op mobiel vergeten

De fout: Schaduwverschuivingen van 10px op mobiel die worden afgesneden of horizontaal scrollen veroorzaken.

De oplossing: Gebruik responsieve schaduw-utilities:

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

3. Te veel accentkleuren

De fout: 5 of meer kleuren gebruiken in de veronderstelling „meer = brutaler”.

De oplossing: Houd het bij zwart + wit + maximaal 2-3 accentkleuren. Ons palet gebruikt geel, roze en cyaan, en dat zit al aan de grens.

4. Toegankelijkheid verwaarlozen

De fout: Gele tekst op een witte achtergrond (onleesbaar), geen focus-states, slecht contrast.

De oplossing: Test altijd het contrast. Gebruik zwarte tekst op gele/witte achtergronden, witte tekst op zwarte/donkere achtergronden.

5. Zachte schaduwen die binnensluipen

De fout: Per ongeluk de standaardschaduwen van Tailwind (shadow-lg) gebruiken, die blur hebben.

De oplossing: Maak eigen schaduw-utilities en schakel indien nodig de standaardschaduwen uit.

Volgende stappen en bronnen

Gefeliciteerd. Je hebt zojuist een complete neobrutalistische website vanaf nul gebouwd.

Wat je hierna kunt doen

1. Zet hem online

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

2. Voeg functionaliteit toe

Koppel het nieuwsbriefformulier aan een dienst (ConvertKit, Mailchimp)
Implementeer de prijs-CTA's met Stripe
Voeg analytics toe (Plausible, Fathom)

3. Breid het designsysteem uit

Maak meer componenten (modals, dropdowns, tooltips)
Bouw extra pagina's (over ons, blog, contact)
Voeg een donkere modus toe (neobrutalisme werkt ook prima in donkere modus)

4. Optimaliseer verder

Minify de CSS en HTML
Voeg afbeeldingsoptimalisatie toe
Implementeer caching-strategieën
Overweeg een static site generator voor nog betere prestaties

Nuttige bronnen

Designinspiratie:

Brutalist Websites - Een gecureerde collectie
Gumroad - Neobrutalisme goed gedaan
Feastables - Een speelse neobrutalistische e-commerce

Tools:

Neobrutalism - Kant-en-klare neobrutalistische componenten
Tailwind CSS v4 Docs - De officiële documentatie
Google Fonts - Gratis lettertypes (Archivo Black, Space Grotesk)

Generators voor kleurenpaletten:

Coolors - Kleurschema's genereren
Adobe Color - Kleurencirkel en palettools

Slotgedachten

Je hebt zojuist een neobrutalistische website gebouwd, van nul tot online in minder dan een uur. Dat is behoorlijk indrukwekkend.

Belangrijkste conclusies:

Neobrutalisme = dikke randen + harde schaduwen + gedurfde kleuren + nul border-radius
De @theme-directive van Tailwind v4 maakt aanpassen opgeruimder
Consistentie is cruciaal (randdiktes, schaduwen, kleuren)
Toegankelijkheid blijft belangrijk (hoog contrast helpt)
Begin met een solide designsysteem en bouw daarna de componenten

Deze site is niet zomaar een demo: het is een template die je kunt aanpassen voor echte projecten. Verander de kleuren, wissel de lettertypes, stel de schaduwen bij, maak hem van jou.

Het beste aan neobrutalisme? Het is vergevingsgezind. Imperfectie hoort bij de esthetiek. Die iets scheve rand of dat element net uit het midden? Dat is geen bug, dat is karakter.

Ga nu iets gedurfds bouwen dat er niet uitziet als het portfolio/SaaS/de landingspagina van iedereen.

En als je kant-en-klare componenten wilt om nog sneller te gaan, bekijk dan Neobrutalism. Het is deze esthetiek, verpakt als kopieer-en-plak-componenten.

Veel bouwplezier. 🚀

Vragen? Laat een reactie achter of neem contact op via Twitter. Ik zie graag wat mensen met deze stijl bouwen.

Wil je de volledige code? Het complete HTML-bestand is beschikbaar als GitHub Gist (link in de reacties).

Vond je dit nuttig? Deel het met een developer die uit de valkuil van saai design moet ontsnappen.

← Terug naar de artikelen

Hoe je een neobrutalistische website bouwt met Tailwind CSS v4 (stap voor stap)

Wat we bouwen

Stap 1: project opzetten (5 minuten)

Maak je project

Initialiseer npm en installeer Tailwind v4

Maak de projectstructuur

Stap 2: Tailwind v4 configureren (3 minuten)

Maak je stijlbestand

Stap 3: HTML-structuur (5 minuten)

Zet de dev-server op

Stap 4: de hero-sectie bouwen (10 minuten)

Stap 5: feature-sectie (10 minuten)

Stap 6: prijssectie (12 minuten)

Stap 7: sectie met reviews (8 minuten)

Stap 8: footer (5 minuten)

Stap 9: glans en interacties toevoegen (5 minuten)

Vloeiend scrollen

Toggle voor het mobiele menu

Prestatie-optimalisatie

Stap 10: testen en bijschaven (5 minuten)

Responsiviteitstest

Toegankelijkheidscheck

Prestatiecheck

Bonus: overstappen naar React/Next.js

Veelvoorkomende fouten en hoe je ze voorkomt

1. Inconsistente randdiktes

2. Schaduwverschuivingen op mobiel vergeten

3. Te veel accentkleuren

4. Toegankelijkheid verwaarlozen

5. Zachte schaduwen die binnensluipen

Volgende stappen en bronnen

Wat je hierna kunt doen

Nuttige bronnen

Slotgedachten

20 neobrutalistische kleurenpaletten met hexcodes (klaar om te kopiëren en plakken)

Hoe je elk React-project in 10 minuten omvormt naar neobrutalisme

Neobrutalisme vs. minimalisme: wanneer welke gebruiken (en wanneer niet)

Hoe je een neobrutalistische website bouwt met Tailwind CSS v4 (stap voor stap)

Wat we bouwen

Stap 1: project opzetten (5 minuten)

Maak je project

Initialiseer npm en installeer Tailwind v4

Maak de projectstructuur

Stap 2: Tailwind v4 configureren (3 minuten)

Maak je stijlbestand

Stap 3: HTML-structuur (5 minuten)

Zet de dev-server op

Stap 4: de hero-sectie bouwen (10 minuten)

Stap 5: feature-sectie (10 minuten)

Stap 6: prijssectie (12 minuten)

Stap 7: sectie met reviews (8 minuten)

Stap 8: footer (5 minuten)

Stap 9: glans en interacties toevoegen (5 minuten)

Vloeiend scrollen

Toggle voor het mobiele menu

Prestatie-optimalisatie

Stap 10: testen en bijschaven (5 minuten)

Responsiviteitstest

Toegankelijkheidscheck

Prestatiecheck

Bonus: overstappen naar React/Next.js

Veelvoorkomende fouten en hoe je ze voorkomt

1. Inconsistente randdiktes

2. Schaduwverschuivingen op mobiel vergeten

3. Te veel accentkleuren

4. Toegankelijkheid verwaarlozen

5. Zachte schaduwen die binnensluipen

Volgende stappen en bronnen

Wat je hierna kunt doen

Nuttige bronnen

Slotgedachten

Verder lezen

20 neobrutalistische kleurenpaletten met hexcodes (klaar om te kopiëren en plakken)

Hoe je elk React-project in 10 minuten omvormt naar neobrutalisme

Neobrutalisme vs. minimalisme: wanneer welke gebruiken (en wanneer niet)