1. Mai 2026

tailwind css Neobrutalismus Tutorial Webentwicklung css

So baust du eine neobrutalistische Website mit Tailwind CSS v4 (Schritt für Schritt)

Lerne, wie du eine komplette neobrutalistische Website von Grund auf mit Tailwind CSS v4 baust. Dieses praxisnahe Tutorial führt dich durch Einrichtung, Konfiguration und den Bau jeder Komponente, mit Codebeispielen zum Kopieren und Einfügen.

Dov Azencot

@DovAzencot

Auf X teilen

Also gut, Entwickler. Bauen wir etwas Mutiges.

Keine Theorie. Kein Füllmaterial. Nur du, ich und ein Terminal. Am Ende dieses Tutorials hast du eine voll funktionsfähige neobrutalistische Website, gebaut mit Tailwind CSS v4.

Es geht um:

Dicke schwarze Rahmen
Harte Schlagschatten
Akzente in Elektrikgelb
Wuchtige Typografie
Null abgerundete Ecken

Das ist kein Tutorial nach dem Motto „hier ist eine Komponente". Wir bauen eine ganze Landingpage von Grund auf: Hero-Bereich, Features, Preise, Footer, das ganze Programm. Jede Codezeile erklärt. Jede Design-Entscheidung begründet.

Schnapp dir deinen Kaffee. Öffne dein Terminal. Werden wir brutal.

Was wir bauen

Bevor wir starten, hier, was wir erstellen:

Eine Landingpage für ein fiktives SaaS-Produkt namens „BoldTask": ein Projektmanagement-Tool, das nicht wie jedes andere Projektmanagement-Tool aussieht.

Die Seite wird enthalten:

einen Hero-Bereich mit CTA
Feature-Karten
eine Preistabelle
einen Testimonial-Bereich
einen Footer

Alles mit dieser typischen neobrutalistischen Ästhetik: mutig, kontrastreich und unmöglich zu ignorieren.

Tech-Stack:

Tailwind CSS v4 (das Neueste vom Neuen)
HTML (oder React/Next.js, wenn du willst)
Google Fonts (Archivo Black + Space Grotesk)

Geschätzte Dauer: 45-60 Minuten, wenn du mitmachst

Schritt 1: Projekt einrichten (5 Minuten)

Starten wir bei null. Ich nutze für dieses Tutorial ein einfaches HTML-Setup, aber du kannst es problemlos an React, Next.js oder jedes Framework anpassen.

Erstelle dein Projekt

mkdir neobrutalism-website
cd neobrutalism-website

Initialisiere npm und installiere Tailwind v4

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

Hinweis: Wir installieren Tailwind v4 (derzeit im Beta-Stadium, aber schon stabil genug für die Produktion). Der Tag @next verschafft dir die v4.

Erstelle die Projektstruktur

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

Deine Ordnerstruktur sollte so aussehen:

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

Schritt 2: Tailwind v4 konfigurieren (3 Minuten)

Tailwind v4 bringt ein neues, saubereres Konfigurationssystem mit. Statt tailwind.config.js wird jetzt alles im CSS konfiguriert.

Erstelle deine Stildatei

Öffne src/styles.css und füge hinzu:

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

Was wir gerade gemacht haben:

Eine eigene Farbpalette definiert (Schwarz, Weiß, Gelb, Pink, Cyan)
Alle border-radius-Werte entfernt (Neobrutalismus = scharfe Kanten)
Utilities für harte Schatten erstellt (versetzt, ohne Weichzeichnung)
Eigene Button-Hover-Effekte hinzugefügt, die das „Eindrücken" des Schattens nachahmen

Schritt 3: HTML-Struktur (5 Minuten)

Erstelle die grundlegende HTML-Struktur. Öffne 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>

Dev-Server einrichten

Wir brauchen eine Möglichkeit, unsere Arbeit in der Vorschau zu sehen. Nutzen wir Vite:


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

Füge dieses Skript zu deiner package.json hinzu:

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

Führe jetzt aus:


pnpm dev
npm run dev
yarn dev
bun dev

Öffne http://localhost:5173 in deinem Browser. Du solltest eine grundlegende Navigationsleiste mit dem BoldTask-Branding sehen.

Schritt 4: Den Hero-Bereich bauen (10 Minuten)

Jetzt zum Star der Show. Der Hero-Bereich muss MUTIG sein.

Füge das direkt nach dem <main>-Tag hinzu:

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

Was wir gebaut haben:

Einen bildschirmfüllenden gelben Hintergrund (sofortige Wirkung)
Eine riesige Headline mit Archivo Black
Einen Inhaltskasten mit dickem Rahmen und hartem Schatten
CTAs mit Hover-Effekten (der Schatten wandert beim Überfahren)
Social-Proof-Kennzahlen
Ein visuelles Mockup des Produkts (abstrakte Darstellung)
Eine schwebende Akzentkarte für Tiefe

Die Design-Entscheidungen:

Gelber Hintergrund = hohe Energie, unmöglich zu ignorieren
Weißer Inhaltskasten = erzeugt Kontrast und Hierarchie
Schwarzer CTA auf Gelb = maximale Sichtbarkeit
Schwebende Cyan-Karte = fügt Asymmetrie hinzu (ein neobrutalistisches Prinzip)

Schritt 5: Feature-Bereich (10 Minuten)

Bauen wir die Feature-Karten. Füge das nach dem Hero-Bereich hinzu:

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

Was wir gebaut haben:

6 Feature-Karten in einem responsiven Grid
Color-Blocking (Pink, Cyan, Gelb, Weiß) für visuelles Interesse
Emoji-Icons (schlicht, verspielt, markengerecht)
Hover-Effekt (Karten heben sich beim Überfahren)
Durchgängig dicke Rahmen und harte Schatten

Das Design-Muster: Fällt dir auf, wie die ersten drei Karten Akzentfarben nutzen (Pink, Cyan, Gelb), während die unteren drei weiß sind? Das erzeugt eine visuelle Hierarchie: Die obere Reihe bekommt mehr Aufmerksamkeit.

Schritt 6: Preisbereich (12 Minuten)

Preistabellen sind entscheidend. Machen wir sie unmöglich zu übersehen:

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

Was wir gebaut haben:

Drei klar unterschiedene Preisstufen
Farbcodierung (Weiß = kostenlos, Gelb = beliebt, Cyan = Premium)
Die mittlere Karte angehoben und größer (lenkt die Aufmerksamkeit auf den empfohlenen Plan)
Ein „Most Popular"-Badge auf dem Pro-Plan
Feature-Häkchen (✓ und ✗) für Klarheit
Eine Geld-zurück-Garantie für Vertrauen

Die Design-Strategie:

Der schwarze Hintergrund lässt die farbigen Karten HERAUSSTECHEN
Die leicht angehobene mittlere Karte erzeugt eine visuelle Hierarchie
Die einheitliche Platzierung der CTAs erleichtert den Vergleich
Verschieden gefärbte CTAs passen zum Hintergrund ihrer Karte

Schritt 7: Testimonial-Bereich (8 Minuten)

Social Proof verkauft. Fügen wir Testimonials hinzu:

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

Was wir gebaut haben:

Drei Testimonial-Karten mit einheitlichem Stil
Sternebewertungen (Gelb = Aufmerksamkeit)
Nutzer-Avatare (abstrakte farbige Quadrate statt Fotos)
Namen und Titel für Glaubwürdigkeit

Warum abstrakte Avatare? Echte Fotos können corporate wirken. Farbige Quadrate bewahren die verspielte, geometrische neobrutalistische Ästhetik.

Schritt 8: Footer (5 Minuten)

Jede Website braucht einen Footer. Machen wir unseren mit Kante:

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

Was wir gebaut haben:

Ein Footer-Layout mit vier Spalten
Marke, Navigation und Newsletter-Anmeldung
Hover-Effekte (Links werden gelb)
Ein E-Mail-Eingabefeld im brutalen Stil
Eine Copyright-Leiste am unteren Rand

Schritt 9: Feinschliff und Interaktionen hinzufügen (5 Minuten)

Fügen wir ein paar letzte Handgriffe hinzu, damit sich die Seite ausgefeilt anfühlt.

Sanftes Scrollen

Füge das deiner src/styles.css hinzu:

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

Umschalter für das mobile Menü

Füge dieses JavaScript vor dem schließenden </body>-Tag hinzu:

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

Performance-Optimierung

Füge diese Meta-Tags zu deinem <head> hinzu:

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

Schritt 10: Testen und Feinschliff (5 Minuten)

Jetzt teste deine Website:

Responsivitäts-Test

Öffne die DevTools (F12) und teste diese Breakpoints:

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

Stelle sicher, dass:

der Text in allen Größen lesbar ist
die Buttons auf dem Handy antippbar sind (mindestens 44px hoch)
die Grid-Layouts korrekt umbrechen
die Schatten auf kleinen Bildschirmen nicht abgeschnitten werden

Barrierefreiheits-Check

Geh diese Checkliste durch:

Alle interaktiven Elemente sind per Tastatur erreichbar (durchlaufe die Seite mit Tab)
Der Farbkontrast erfüllt die WCAG-AA-Kriterien (Schwarz auf Weiß ✓, Gelb auf Weiß ✓)
Bilder haben einen Alternativtext (hier haben wir divs genutzt, aber wenn du Bilder hinzufügst, ergänze den Alt-Text)
Formularfelder haben Labels
Fokus-Zustände sind sichtbar

Performance-Check

Öffne Lighthouse in den Chrome DevTools und führe ein Audit aus. Du solltest sehen:

Performance: 90+ (wenig CSS, keine schweren Frameworks)
Barrierefreiheit: 90+ (hoher Kontrast, semantisches HTML)
Best Practices: 90+
SEO: 90+

Falls die Werte niedrig sind, hier die üblichen Korrekturen:

Füge width und height bei Bildern hinzu
Minifiziere das CSS in der Produktion
Aktiviere Caching-Header
Komprimiere die Bilder

Bonus: Umstieg auf React/Next.js

Willst du das in einer React-App nutzen? So konvertierst du den Hero-Bereich:

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

Dann in deiner 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

Häufige Fehler und wie du sie vermeidest

Nachdem ich Dutzende neobrutalistischer Seiten gebaut habe, hier die Stolpersteine, die ich am häufigsten sehe:

1. Uneinheitliche Rahmenstärken

Der Fehler: Rahmen mit 2px bei manchen Elementen, 5px bei anderen, 3px irgendwo sonst.

Die Lösung: Wähle 2-3 Rahmenstärken (z. B. 3px Standard, 4px für Betonung, 6px für Hauptelemente) und halte dich durchgängig daran.

2. Schatten-Versätze auf Mobilgeräten vergessen

Der Fehler: Schatten-Versätze von 10px auf dem Handy, die abgeschnitten werden oder horizontales Scrollen auslösen.

Die Lösung: Nutze responsive Schatten-Utilities:

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

3. Zu viele Akzentfarben

Der Fehler: 5 oder mehr Farben nutzen, in dem Glauben „mehr = brutaler".

Die Lösung: Halte dich an Schwarz + Weiß + maximal 2-3 Akzentfarben. Unsere Palette nutzt Gelb, Pink und Cyan, und das ist schon am Limit.

4. Die Barrierefreiheit vernachlässigen

Der Fehler: gelber Text auf weißem Hintergrund (unlesbar), keine Fokus-Zustände, schlechter Kontrast.

Die Lösung: Teste immer den Kontrast. Nutze schwarzen Text auf gelben/weißen Hintergründen, weißen Text auf schwarzen/dunklen Hintergründen.

5. Weiche Schatten, die sich einschleichen

Der Fehler: aus Versehen die Standardschatten von Tailwind (shadow-lg) nutzen, die eine Weichzeichnung haben.

Die Lösung: Erstelle eigene Schatten-Utilities und deaktiviere bei Bedarf die Standardschatten.

Nächste Schritte und Ressourcen

Glückwunsch. Du hast gerade eine komplette neobrutalistische Website von Grund auf gebaut.

Was du als Nächstes tun kannst

1. Veröffentliche sie

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

2. Füge Funktionalität hinzu

Verbinde das Newsletter-Formular mit einem Dienst (ConvertKit, Mailchimp)
Setze die Preis-CTAs mit Stripe um
Füge Analytics hinzu (Plausible, Fathom)

3. Erweitere das Design-System

Erstelle mehr Komponenten (Modals, Dropdowns, Tooltips)
Baue weitere Seiten (Über uns, Blog, Kontakt)
Füge einen Dark Mode hinzu (der Neobrutalismus funktioniert im Dark Mode ebenfalls hervorragend)

4. Optimiere weiter

Minifiziere CSS und HTML
Füge Bildoptimierung hinzu
Setze Caching-Strategien um
Erwäge einen Static-Site-Generator für noch bessere Performance

Hilfreiche Ressourcen

Design-Inspiration:

Brutalist Websites - Eine kuratierte Sammlung
Gumroad - Neobrutalismus richtig gemacht
Feastables - Ein verspielter neobrutalistischer E-Commerce

Werkzeuge:

Neobrutalism - Vorgefertigte neobrutalistische Komponenten
Tailwind CSS v4 Docs - Die offizielle Dokumentation
Google Fonts - Kostenlose Schriften (Archivo Black, Space Grotesk)

Farbpaletten-Generatoren:

Coolors - Farbschemata generieren
Adobe Color - Farbkreis und Paletten-Werkzeuge

Abschließende Gedanken

Du hast gerade eine neobrutalistische Website in unter einer Stunde von null bis zum Deployment gebaut. Das ist ziemlich beeindruckend.

Die wichtigsten Erkenntnisse:

Neobrutalismus = dicke Rahmen + harte Schatten + mutige Farben + null border-radius
Die @theme-Direktive von Tailwind v4 macht die Anpassung sauberer
Konsistenz ist entscheidend (Rahmenstärken, Schatten, Farben)
Barrierefreiheit zählt weiterhin (hoher Kontrast hilft)
Starte mit einem soliden Design-System und baue dann die Komponenten

Diese Seite ist nicht nur eine Demo: Sie ist ein Template, das du für echte Projekte anpassen kannst. Ändere die Farben, tausche die Schriften, passe die Schatten an, mach sie zu deiner.

Das Beste am Neobrutalismus? Er ist nachsichtig. Unvollkommenheit gehört zur Ästhetik. Dieser leicht schiefe Rahmen oder dieses etwas außermittige Element? Das ist kein Bug, das ist Charakter.

Jetzt geh und bau etwas Mutiges, das nicht wie das Portfolio/SaaS/die Landingpage von allen anderen aussieht.

Und wenn du vorgefertigte Komponenten willst, um noch schneller voranzukommen, sieh dir Neobrutalism an. Das ist diese Ästhetik, verpackt als Copy-Paste-Komponenten.

Viel Spaß beim Bauen. 🚀

Fragen? Hinterlasse einen Kommentar oder melde dich auf Twitter. Ich sehe gern, was die Leute mit diesem Stil bauen.

Willst du den kompletten Code? Die vollständige HTML-Datei gibt es als GitHub Gist (Link in den Kommentaren).

War das hilfreich? Teile es mit einem Entwickler, der aus der Falle des langweiligen Designs entkommen muss.

← Zurück zu den Artikeln

So baust du eine neobrutalistische Website mit Tailwind CSS v4 (Schritt für Schritt)

Was wir bauen

Schritt 1: Projekt einrichten (5 Minuten)

Erstelle dein Projekt

Initialisiere npm und installiere Tailwind v4

Erstelle die Projektstruktur

Schritt 2: Tailwind v4 konfigurieren (3 Minuten)

Erstelle deine Stildatei

Schritt 3: HTML-Struktur (5 Minuten)

Dev-Server einrichten

Schritt 4: Den Hero-Bereich bauen (10 Minuten)

Schritt 5: Feature-Bereich (10 Minuten)

Schritt 6: Preisbereich (12 Minuten)

Schritt 7: Testimonial-Bereich (8 Minuten)

Schritt 8: Footer (5 Minuten)

Schritt 9: Feinschliff und Interaktionen hinzufügen (5 Minuten)

Sanftes Scrollen

Umschalter für das mobile Menü

Performance-Optimierung

Schritt 10: Testen und Feinschliff (5 Minuten)

Responsivitäts-Test

Barrierefreiheits-Check

Performance-Check

Bonus: Umstieg auf React/Next.js

Häufige Fehler und wie du sie vermeidest

1. Uneinheitliche Rahmenstärken

2. Schatten-Versätze auf Mobilgeräten vergessen

3. Zu viele Akzentfarben

4. Die Barrierefreiheit vernachlässigen

5. Weiche Schatten, die sich einschleichen

Nächste Schritte und Ressourcen

Was du als Nächstes tun kannst

Hilfreiche Ressourcen

Abschließende Gedanken

20 neobrutalistische Farbpaletten mit Hex-Codes (fertig zum Kopieren und Einfügen)

So verwandelst du jedes React-Projekt in 10 Minuten in Neobrutalismus

Neobrutalismus vs. Minimalismus: Wann du welchen einsetzt (und wann nicht)

So baust du eine neobrutalistische Website mit Tailwind CSS v4 (Schritt für Schritt)

Was wir bauen

Schritt 1: Projekt einrichten (5 Minuten)

Erstelle dein Projekt

Initialisiere npm und installiere Tailwind v4

Erstelle die Projektstruktur

Schritt 2: Tailwind v4 konfigurieren (3 Minuten)

Erstelle deine Stildatei

Schritt 3: HTML-Struktur (5 Minuten)

Dev-Server einrichten

Schritt 4: Den Hero-Bereich bauen (10 Minuten)

Schritt 5: Feature-Bereich (10 Minuten)

Schritt 6: Preisbereich (12 Minuten)

Schritt 7: Testimonial-Bereich (8 Minuten)

Schritt 8: Footer (5 Minuten)

Schritt 9: Feinschliff und Interaktionen hinzufügen (5 Minuten)

Sanftes Scrollen

Umschalter für das mobile Menü

Performance-Optimierung

Schritt 10: Testen und Feinschliff (5 Minuten)

Responsivitäts-Test

Barrierefreiheits-Check

Performance-Check

Bonus: Umstieg auf React/Next.js

Häufige Fehler und wie du sie vermeidest

1. Uneinheitliche Rahmenstärken

2. Schatten-Versätze auf Mobilgeräten vergessen

3. Zu viele Akzentfarben

4. Die Barrierefreiheit vernachlässigen

5. Weiche Schatten, die sich einschleichen

Nächste Schritte und Ressourcen

Was du als Nächstes tun kannst

Hilfreiche Ressourcen

Abschließende Gedanken

Ähnliche Artikel

20 neobrutalistische Farbpaletten mit Hex-Codes (fertig zum Kopieren und Einfügen)

So verwandelst du jedes React-Projekt in 10 Minuten in Neobrutalismus

Neobrutalismus vs. Minimalismus: Wann du welchen einsetzt (und wann nicht)