1 maggio 2026

tailwind css neobrutalismo tutorial sviluppo web css

Come creare un sito neobrutalista con Tailwind CSS v4 (passo dopo passo)

Impara a creare un sito neobrutalista completo da zero con Tailwind CSS v4. Questo tutorial pratico ti accompagna nell'installazione, nella configurazione e nella costruzione di ogni componente, con esempi di codice da copiare e incollare.

Dov Azencot

@DovAzencot

Condividi su X

Bene, sviluppatori. Costruiamo qualcosa di audace.

Niente teoria. Niente riempitivi. Solo tu, io e un terminale. Alla fine di questo tutorial avrai un sito neobrutalista pienamente funzionante, costruito con Tailwind CSS v4.

Parliamo di:

Bordi neri spessi
Ombre proiettate dure
Accenti di giallo elettrico
Tipografia corposa
Zero angoli arrotondati

Questo non è un tutorial del tipo «ecco un componente». Costruiamo un'intera landing page da zero: sezione hero, funzionalità, prezzi, footer, tutto quanto. Ogni riga di codice spiegata. Ogni decisione di design motivata.

Prenditi un caffè. Apri il terminale. Diventiamo brutali.

Cosa costruiamo

Prima di iniziare, ecco cosa creiamo:

Una landing page per un prodotto SaaS immaginario chiamato «BoldTask»: uno strumento di gestione progetti che non assomiglia a tutti gli altri strumenti di gestione progetti.

La pagina includerà:

Una sezione hero con CTA
Schede delle funzionalità
Una tabella dei prezzi
Una sezione di testimonianze
Un footer

Tutto con quell'estetica neobrutalista così caratteristica: audace, ad alto contrasto e impossibile da ignorare.

Stack tecnologico:

Tailwind CSS v4 (l'ultima e la migliore)
HTML (o React/Next.js se preferisci)
Google Fonts (Archivo Black + Space Grotesk)

Tempo stimato: dai 45 ai 60 minuti se segui passo passo

Passo 1: preparazione del progetto (5 minuti)

Partiamo da zero. Io uso una semplice configurazione HTML per questo tutorial, ma puoi adattarla facilmente a React, Next.js o qualsiasi framework.

Crea il tuo progetto

mkdir neobrutalism-website
cd neobrutalism-website

Inizializza npm e installa Tailwind v4

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

Nota: installiamo Tailwind v4 (per ora in beta, ma già abbastanza stabile per la produzione). Il tag @next ti dà la v4.

Crea la struttura del progetto

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

La struttura delle cartelle dovrebbe apparire così:

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

Passo 2: configurare Tailwind v4 (3 minuti)

Tailwind v4 porta un sistema di configurazione nuovo e più pulito. Al posto di tailwind.config.js, ora si configura tutto nel CSS.

Crea il tuo file di stili

Apri src/styles.css e aggiungi:

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

Cosa abbiamo appena fatto:

Definito una palette di colori personalizzata (nero, bianco, giallo, rosa, ciano)
Eliminato tutti i valori di border-radius (neobrutalismo = bordi affilati)
Creato utility per le ombre dure (con offset, senza sfocatura)
Aggiunto effetti di hover personalizzati per i pulsanti che imitano lo «schiacciamento» dell'ombra

Passo 3: la struttura HTML (5 minuti)

Crea la struttura HTML di base. Apri 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>

Configura il server di sviluppo

Ci serve un modo per vedere in anteprima il nostro lavoro. Usiamo Vite:


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

Aggiungi questo script al tuo package.json:

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

Ora esegui:


pnpm dev
npm run dev
yarn dev
bun dev

Apri http://localhost:5173 nel browser. Dovresti vedere una barra di navigazione di base con il branding di BoldTask.

Passo 4: costruire la sezione hero (10 minuti)

Ora, la star dello spettacolo. La sezione hero deve essere AUDACE.

Aggiungi questo subito dopo il tag <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>

Cosa abbiamo costruito:

Uno sfondo giallo a tutto schermo (impatto immediato)
Un titolo enorme con Archivo Black
Un riquadro di contenuto con bordo spesso e ombra dura
CTA con effetti di hover (l'ombra si sposta al passaggio del cursore)
Metriche di riprova sociale
Un mockup visivo del prodotto (rappresentazione astratta)
Una scheda d'accento fluttuante per dare profondità

Le decisioni di design:

Sfondo giallo = energia alta, impossibile da ignorare
Riquadro di contenuto bianco = crea contrasto e gerarchia
CTA nero su giallo = visibilità massima
Scheda ciano fluttuante = aggiunge asimmetria (un principio neobrutalista)

Passo 5: la sezione delle funzionalità (10 minuti)

Costruiamo le schede delle funzionalità. Aggiungi questo dopo la sezione 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>

Cosa abbiamo costruito:

6 schede delle funzionalità in una griglia responsive
Blocchi di colore (rosa, ciano, giallo, bianco) per dare interesse visivo
Icone emoji (semplici, giocose, in linea con il brand)
Effetto di hover (le schede si sollevano al passaggio del cursore)
Bordi spessi e ombre dure, sempre coerenti

Il pattern di design: Noti come le prime tre schede usano colori d'accento (rosa, ciano, giallo) mentre le tre in basso sono bianche? Questo crea una gerarchia visiva: la riga superiore cattura più attenzione.

Passo 6: la sezione dei prezzi (12 minuti)

Le tabelle dei prezzi sono cruciali. Rendiamole impossibili da mancare:

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

Cosa abbiamo costruito:

Tre livelli di prezzo chiaramente differenziati
Un codice colore (bianco = gratis, giallo = popolare, ciano = premium)
La scheda centrale, sollevata e più grande (attira l'attenzione sul piano consigliato)
Un badge «Most Popular» sul piano Pro
Spunte delle funzionalità (✓ e ✗) per maggiore chiarezza
Una garanzia di rimborso, per generare fiducia

La strategia di design:

Lo sfondo nero fa RISALTARE le schede colorate
La scheda centrale, leggermente sollevata, crea gerarchia visiva
Collocare la CTA sempre nello stesso punto rende facile il confronto
Ogni CTA colorata coincide con lo sfondo della sua scheda

Passo 7: la sezione delle testimonianze (8 minuti)

La riprova sociale vende. Aggiungiamo le testimonianze:

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

Cosa abbiamo costruito:

Tre schede di testimonianze con uno stile omogeneo
Valutazioni a stelle (giallo = attenzione)
Avatar degli utenti (quadrati colorati astratti al posto delle foto)
Nomi e ruoli, per dare credibilità

Perché avatar astratti? Le foto reali possono dare un'aria corporate. I quadrati colorati mantengono l'estetica neobrutalista giocosa e geometrica.

Passo 8: il footer (5 minuti)

Ogni sito ha bisogno di un footer. Rendiamo il nostro pieno di carattere:

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

Cosa abbiamo costruito:

Un footer a quattro colonne
Il brand, la navigazione e l'iscrizione alla newsletter
Effetti di hover (i link diventano gialli)
Un campo email con uno stile brutale
Una barra di copyright in fondo

Passo 9: aggiungere rifinitura e interazioni (5 minuti)

Aggiungiamo qualche tocco finale perché il sito risulti curato.

Scorrimento fluido

Aggiungi questo al tuo 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);
}

Aggiungi questo JavaScript prima del tag di chiusura </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>

Ottimizzazione delle prestazioni

Aggiungi questi meta tag al tuo <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">

Passo 10: test e rifiniture (5 minuti)

Ora testa il tuo sito:

Test di responsività

Apri i DevTools (F12) e prova questi breakpoint:

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

Assicurati che:

il testo sia leggibile a ogni dimensione
i pulsanti siano toccabili su mobile (almeno 44px di altezza)
le griglie si riorganizzino correttamente
le ombre non vengano tagliate sugli schermi piccoli

Controllo dell'accessibilità

Ripassa questa checklist:

Tutti gli elementi interattivi sono raggiungibili da tastiera (percorri la pagina con Tab)
Il contrasto dei colori rispetta i criteri WCAG AA (nero su bianco ✓, giallo su bianco ✓)
Le immagini hanno un testo alternativo (qui abbiamo usato dei div, ma se aggiungi immagini metti l'alt)
I campi dei form hanno delle etichette
Gli stati di focus sono visibili

Controllo delle prestazioni

Apri Lighthouse nei DevTools di Chrome ed esegui un audit. Dovresti vedere:

Prestazioni: 90+ (poco CSS, nessun framework pesante)
Accessibilità: 90+ (alto contrasto, HTML semantico)
Best practice: 90+
SEO: 90+

Se i punteggi sono bassi, ecco le correzioni più comuni:

Aggiungi width e height alle immagini
Minifica il CSS in produzione
Attiva gli header di caching
Comprimi le immagini

Bonus: passare a React/Next.js

Vuoi usarlo in un'app React? Ecco come convertire la sezione 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>
  );
}

Poi, nel tuo 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

Errori comuni e come evitarli

Dopo aver costruito decine di siti neobrutalisti, ecco gli inciampi che vedo più spesso:

1. Spessori dei bordi incoerenti

L'errore: usare bordi da 2px su alcuni elementi, da 5px su altri e da 3px altrove.

La soluzione: scegli 2-3 spessori (per esempio, 3px standard, 4px per l'enfasi, 6px per gli elementi principali) e rispettali dall'inizio alla fine.

2. Dimenticare gli offset delle ombre su mobile

L'errore: offset delle ombre da 10px su mobile che vengono tagliati o provocano lo scorrimento orizzontale.

La soluzione: usa utility per le ombre responsive:

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

3. Troppi colori d'accento

L'errore: usare 5 o più colori pensando che «più = più brutale».

La soluzione: attieniti a nero + bianco + 2-3 colori d'accento al massimo. La nostra palette usa giallo, rosa e ciano, ed è già al limite.

4. Trascurare l'accessibilità

L'errore: testo giallo su sfondo bianco (illeggibile), nessuno stato di focus, contrasto scarso.

La soluzione: testa sempre il contrasto. Usa testo nero su sfondi gialli/bianchi e testo bianco su sfondi neri/scuri.

5. Ombre morbide che si insinuano

L'errore: usare senza volerlo le ombre predefinite di Tailwind (shadow-lg), che hanno la sfocatura.

La soluzione: crea utility per le ombre personalizzate e disattiva quelle predefinite se serve.

Prossimi passi e risorse

Congratulazioni. Hai appena costruito un sito neobrutalista completo da zero.

Cosa fare dopo

1. Mettilo online

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

2. Aggiungi funzionalità

Collega il form della newsletter a un servizio (ConvertKit, Mailchimp)
Implementa le CTA dei prezzi con Stripe
Aggiungi l'analitica (Plausible, Fathom)

3. Amplia il design system

Crea altri componenti (modali, menu a tendina, tooltip)
Costruisci altre pagine (chi siamo, blog, contatti)
Aggiungi la modalità scura (il neobrutalismo funziona alla grande anche in modalità scura)

4. Ottimizza ancora di più

Minifica il CSS e l'HTML
Aggiungi l'ottimizzazione delle immagini
Implementa strategie di caching
Valuta un generatore di siti statici per prestazioni ancora migliori

Risorse utili

Ispirazione per il design:

Brutalist Websites - Una raccolta selezionata
Gumroad - Il neobrutalismo fatto bene
Feastables - Un e-commerce neobrutalista e giocoso

Strumenti:

Neobrutalism - Componenti neobrutalisti pronti all'uso
Tailwind CSS v4 Docs - La documentazione ufficiale
Google Fonts - Font gratuiti (Archivo Black, Space Grotesk)

Generatori di palette di colori:

Coolors - Genera combinazioni di colori
Adobe Color - Cerchio cromatico e strumenti per le palette

Riflessioni finali

Hai appena costruito un sito neobrutalista, da zero fino alla pubblicazione, in meno di un'ora. È davvero notevole.

Punti chiave:

Neobrutalismo = bordi spessi + ombre dure + colori audaci + zero border-radius
La direttiva @theme di Tailwind v4 rende più pulita la personalizzazione
La coerenza è cruciale (spessori dei bordi, ombre, colori)
L'accessibilità conta ancora (l'alto contrasto aiuta)
Parti da un design system solido, poi costruisci i componenti

Questo sito non è solo una demo: è un template che puoi adattare a progetti reali. Cambia i colori, sostituisci i font, regola le ombre, fallo tuo.

La cosa migliore del neobrutalismo? Perdona tutto. L'imperfezione fa parte dell'estetica. Quel bordo un po' disallineato o quell'elemento un po' fuori centro? Non è un bug, è carattere.

Ora vai a costruire qualcosa di audace che non assomigli al portfolio/SaaS/landing page di tutti gli altri.

E se vuoi componenti pronti all'uso per andare ancora più veloce, dai un'occhiata a Neobrutalism. È questa estetica, confezionata in componenti da copiare e incollare.

Buona costruzione. 🚀

Hai domande? Lascia un commento o scrivimi su Twitter. Adoro vedere cosa costruisce la gente con questo stile.

Vuoi il codice completo? Il file HTML integrale è disponibile come GitHub Gist (link nei commenti).

Ti è stato utile? Condividilo con uno sviluppatore che ha bisogno di sfuggire alla trappola del design noioso.

← Torna agli articoli

Come creare un sito neobrutalista con Tailwind CSS v4 (passo dopo passo)

Cosa costruiamo

Passo 1: preparazione del progetto (5 minuti)

Crea il tuo progetto

Inizializza npm e installa Tailwind v4

Crea la struttura del progetto

Passo 2: configurare Tailwind v4 (3 minuti)

Crea il tuo file di stili

Passo 3: la struttura HTML (5 minuti)

Configura il server di sviluppo

Passo 4: costruire la sezione hero (10 minuti)

Passo 5: la sezione delle funzionalità (10 minuti)

Passo 6: la sezione dei prezzi (12 minuti)

Passo 7: la sezione delle testimonianze (8 minuti)

Passo 8: il footer (5 minuti)

Passo 9: aggiungere rifinitura e interazioni (5 minuti)

Scorrimento fluido

Pulsante del menu mobile

Ottimizzazione delle prestazioni

Passo 10: test e rifiniture (5 minuti)

Test di responsività

Controllo dell'accessibilità

Controllo delle prestazioni

Bonus: passare a React/Next.js

Errori comuni e come evitarli

1. Spessori dei bordi incoerenti

2. Dimenticare gli offset delle ombre su mobile

3. Troppi colori d'accento

4. Trascurare l'accessibilità

5. Ombre morbide che si insinuano

Prossimi passi e risorse

Cosa fare dopo

Risorse utili

Riflessioni finali

20 palette di colori neobrutaliste con codici hex (pronte da copiare e incollare)

Come convertire qualsiasi progetto React al neobrutalismo in 10 minuti

Neobrutalismo vs minimalismo: quando usare l'uno e quando l'altro (e quando no)

Come creare un sito neobrutalista con Tailwind CSS v4 (passo dopo passo)

Cosa costruiamo

Passo 1: preparazione del progetto (5 minuti)

Crea il tuo progetto

Inizializza npm e installa Tailwind v4

Crea la struttura del progetto

Passo 2: configurare Tailwind v4 (3 minuti)

Crea il tuo file di stili

Passo 3: la struttura HTML (5 minuti)

Configura il server di sviluppo

Passo 4: costruire la sezione hero (10 minuti)

Passo 5: la sezione delle funzionalità (10 minuti)

Passo 6: la sezione dei prezzi (12 minuti)

Passo 7: la sezione delle testimonianze (8 minuti)

Passo 8: il footer (5 minuti)

Passo 9: aggiungere rifinitura e interazioni (5 minuti)

Scorrimento fluido

Pulsante del menu mobile

Ottimizzazione delle prestazioni

Passo 10: test e rifiniture (5 minuti)

Test di responsività

Controllo dell'accessibilità

Controllo delle prestazioni

Bonus: passare a React/Next.js

Errori comuni e come evitarli

1. Spessori dei bordi incoerenti

2. Dimenticare gli offset delle ombre su mobile

3. Troppi colori d'accento

4. Trascurare l'accessibilità

5. Ombre morbide che si insinuano

Prossimi passi e risorse

Cosa fare dopo

Risorse utili

Riflessioni finali

Continua a leggere

20 palette di colori neobrutaliste con codici hex (pronte da copiare e incollare)

Come convertire qualsiasi progetto React al neobrutalismo in 10 minuti

Neobrutalismo vs minimalismo: quando usare l'uno e quando l'altro (e quando no)