1 de mayo de 2026

tailwind css neobrutalismo tutorial desarrollo web css

Cómo crear un sitio neobrutalista con Tailwind CSS v4 (paso a paso)

Aprende a crear un sitio neobrutalista completo desde cero con Tailwind CSS v4. Este tutorial práctico te acompaña por la instalación, la configuración y la construcción de cada componente, con ejemplos de código que puedes copiar y pegar.

Dov Azencot

@DovAzencot

Compartir en X

Muy bien, desarrolladores. Construyamos algo atrevido.

Nada de teoría. Nada de relleno. Solo tú, yo y un terminal. Al terminar este tutorial, tendrás un sitio neobrutalista plenamente funcional, construido con Tailwind CSS v4.

Hablamos de:

Bordes negros gruesos
Sombras proyectadas duras
Acentos de amarillo eléctrico
Tipografía maciza
Cero esquinas redondeadas

Esto no es un tutorial del tipo «aquí tienes un componente». Vamos a construir una landing page entera desde cero: sección hero, funcionalidades, tarifas, pie de página, todo. Cada línea de código explicada. Cada decisión de diseño justificada.

Prepárate un café. Abre tu terminal. Vamos a ponernos brutales.

Lo que vamos a construir

Antes de empezar, esto es lo que vamos a crear:

Una landing page para un producto SaaS ficticio llamado «BoldTask»: una herramienta de gestión de proyectos que no se parece a todas las demás herramientas de gestión de proyectos.

La página incluirá:

Una sección hero con CTA
Tarjetas de funcionalidades
Una tabla de tarifas
Una sección de testimonios
Un pie de página

Todo con esa estética neobrutalista tan característica: atrevida, de alto contraste e imposible de ignorar.

Stack técnico:

Tailwind CSS v4 (la última y mejor versión)
HTML (o React/Next.js si lo prefieres)
Google Fonts (Archivo Black + Space Grotesk)

Tiempo estimado: de 45 a 60 minutos si vas siguiendo el proceso

Paso 1: preparar el proyecto (5 minutos)

Empecemos de cero. Yo uso una configuración de HTML sencilla para este tutorial, pero puedes adaptarlo fácilmente a React, Next.js o cualquier framework.

Crea tu proyecto

mkdir neobrutalism-website
cd neobrutalism-website

Inicializa npm e instala Tailwind v4

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

Nota: instalamos Tailwind v4 (por ahora en beta, pero ya lo bastante estable para producción). El tag @next te da la v4.

Crea la estructura del proyecto

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

Tu estructura de carpetas debería verse así:

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

Paso 2: configurar Tailwind v4 (3 minutos)

Tailwind v4 trae un sistema de configuración nuevo y más limpio. En lugar de tailwind.config.js, ahora todo se configura en CSS.

Crea tu archivo de estilos

Abre src/styles.css y añade:

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

Lo que acabamos de hacer:

Definir una paleta de colores personalizada (negro, blanco, amarillo, rosa, cian)
Eliminar todos los valores de border-radius (neobrutalismo = bordes afilados)
Crear utilidades de sombra dura (desplazadas, sin desenfoque)
Añadir efectos de hover personalizados para los botones que imitan el «hundimiento» de la sombra

Paso 3: la estructura HTML (5 minutos)

Crea la estructura HTML básica. Abre 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 el servidor de desarrollo

Necesitamos una forma de previsualizar nuestro trabajo. Usemos Vite:


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

Añade este script a tu package.json:

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

Ahora ejecuta:


pnpm dev
npm run dev
yarn dev
bun dev

Abre http://localhost:5173 en tu navegador. Deberías ver una barra de navegación básica con la marca BoldTask.

Paso 4: construir la sección hero (10 minutos)

Ahora, la estrella del espectáculo. La sección hero tiene que ser ATREVIDA.

Añade esto justo después de la etiqueta <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>

Lo que construimos:

Un fondo amarillo a pantalla completa (impacto inmediato)
Un titular enorme con Archivo Black
Un recuadro de contenido con borde grueso y sombra dura
CTA con efectos de hover (la sombra se mueve al pasar el cursor)
Métricas de prueba social
Una maqueta visual del producto (representación abstracta)
Una tarjeta de acento flotante para dar profundidad

Las decisiones de diseño:

Fondo amarillo = energía alta, imposible de ignorar
Recuadro de contenido blanco = crea contraste y jerarquía
CTA negro sobre amarillo = visibilidad máxima
Tarjeta cian flotante = añade asimetría (un principio neobrutalista)

Paso 5: la sección de funcionalidades (10 minutos)

Construyamos las tarjetas de funcionalidades. Añade esto después de la sección 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>

Lo que construimos:

6 tarjetas de funcionalidades en una cuadrícula responsiva
Aplicación de bloques de color (rosa, cian, amarillo, blanco) para dar interés visual
Iconos emoji (simples, desenfadados, acordes con la marca)
Efecto de hover (las tarjetas se elevan al pasar el cursor)
Bordes gruesos y sombras duras, siempre coherentes

El patrón de diseño: ¿Ves cómo las tres primeras tarjetas usan colores de acento (rosa, cian, amarillo) mientras que las tres de abajo son blancas? Eso crea una jerarquía visual: la fila superior capta más atención.

Paso 6: la sección de tarifas (12 minutos)

Las tablas de tarifas son cruciales. Hagámoslas imposibles de pasar por alto:

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

Lo que construimos:

Tres niveles de tarifas claramente diferenciados
Un código de color (blanco = gratis, amarillo = popular, cian = premium)
La tarjeta central, elevada y más grande (atrae la atención hacia el plan recomendado)
Una insignia «Most Popular» en el plan Pro
Marcas de funcionalidades (✓ y ✗) para mayor claridad
Una garantía de devolución del dinero, para generar confianza

La estrategia de diseño:

El fondo negro hace RESALTAR las tarjetas de color
La tarjeta central, ligeramente elevada, crea jerarquía visual
Colocar el CTA siempre en el mismo sitio facilita la comparación
Cada CTA de color coincide con el fondo de su tarjeta

Paso 7: la sección de testimonios (8 minutos)

La prueba social vende. Añadamos testimonios:

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

Lo que construimos:

Tres tarjetas de testimonios con un estilo homogéneo
Valoraciones con estrellas (amarillo = atención)
Avatares de usuario (cuadrados de color abstractos en lugar de fotos)
Nombres y cargos, para dar credibilidad

¿Por qué avatares abstractos? Las fotos reales pueden dar un aire corporativo. Los cuadrados de color mantienen la estética neobrutalista desenfadada y geométrica.

Paso 8: el pie de página (5 minutos)

Todo sitio necesita un pie de página. Hagamos el nuestro con carácter:

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

Lo que construimos:

Un pie de página a cuatro columnas
La marca, la navegación y la suscripción a la newsletter
Efectos de hover (los enlaces se vuelven amarillos)
Un campo de email con estilo brutal
Una barra de copyright en la parte inferior

Paso 9: añadir pulido e interacciones (5 minutos)

Añadamos unos toques finales para que el sitio se sienta pulido.

Desplazamiento suave

Añade esto a tu 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);
}

Botón del menú móvil

Añade este JavaScript antes de la etiqueta de cierre </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>

Optimización del rendimiento

Añade estas etiquetas meta a tu <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">

Paso 10: pruebas y ajustes (5 minutos)

Ahora prueba tu sitio:

Pruebas de responsividad

Abre las DevTools (F12) y prueba estos breakpoints:

Móvil (375px)
Tablet (768px)
Escritorio (1280px)

Asegúrate de que:

El texto sea legible en todos los tamaños
Los botones se puedan tocar en móvil (al menos 44px de alto)
Las cuadrículas se reorganicen correctamente
Las sombras no se corten en pantallas pequeñas

Comprobación de accesibilidad

Repasa esta lista de control:

Todos los elementos interactivos son accesibles con el teclado (recorre la página con Tab)
El contraste de color cumple los criterios WCAG AA (negro sobre blanco ✓, amarillo sobre blanco ✓)
Las imágenes tienen texto alternativo (aquí usamos divs, pero si añades imágenes, añade el alt)
Los campos de formulario tienen etiquetas
Los estados de focus son visibles

Comprobación del rendimiento

Abre Lighthouse en las DevTools de Chrome y ejecuta una auditoría. Deberías ver:

Rendimiento: 90+ (poco CSS, sin frameworks pesados)
Accesibilidad: 90+ (alto contraste, HTML semántico)
Buenas prácticas: 90+
SEO: 90+

Si las puntuaciones son bajas, correcciones habituales:

Añade width y height a las imágenes
Minifica el CSS en producción
Activa las cabeceras de caché
Comprime las imágenes

Bonus: pasar a React/Next.js

¿Quieres usar esto en una app de React? Así se convierte la sección 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>
  );
}

Luego, en tu 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

Errores comunes y cómo evitarlos

Después de construir docenas de sitios neobrutalistas, estos son los tropiezos que veo con más frecuencia:

1. Anchos de borde incoherentes

El error: usar bordes de 2px en algunos elementos, de 5px en otros y de 3px en algún otro sitio.

La solución: elige 2 o 3 anchos de borde (por ejemplo, 3px estándar, 4px para el énfasis, 6px para los elementos principales) y respétalos de principio a fin.

2. Olvidar los desplazamientos de sombra en móvil

El error: desplazamientos de sombra de 10px en móvil que se cortan o provocan desplazamiento horizontal.

La solución: usa utilidades de sombra responsivas:

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

3. Demasiados colores de acento

El error: usar 5 colores o más pensando que «más = más brutal».

La solución: cíñete a negro + blanco + 2 o 3 colores de acento como máximo. Nuestra paleta usa amarillo, rosa y cian, y eso ya está al límite.

4. Descuidar la accesibilidad

El error: texto amarillo sobre fondo blanco (ilegible), sin estados de focus, contraste pobre.

La solución: prueba siempre el contraste. Usa texto negro sobre fondos amarillos/blancos y texto blanco sobre fondos negros/oscuros.

5. Sombras suaves que se cuelan

El error: usar sin querer las sombras por defecto de Tailwind (shadow-lg), que llevan desenfoque.

La solución: crea utilidades de sombra personalizadas y desactiva las sombras por defecto si hace falta.

Próximos pasos y recursos

¡Felicidades! Acabas de construir un sitio neobrutalista completo desde cero.

Qué hacer a continuación

1. Despliégalo

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

2. Añade funcionalidad

Conecta el formulario de newsletter a un servicio (ConvertKit, Mailchimp)
Implementa los CTA de tarifas con Stripe
Añade analítica (Plausible, Fathom)

3. Amplía el design system

Crea más componentes (modales, menús desplegables, tooltips)
Construye páginas adicionales (sobre nosotros, blog, contacto)
Añade modo oscuro (el neobrutalismo también funciona genial en modo oscuro)

4. Optimiza aún más

Minifica el CSS y el HTML
Añade optimización de imágenes
Implementa estrategias de caché
Considera un generador de sitios estáticos para un rendimiento aún mejor

Recursos útiles

Inspiración de diseño:

Brutalist Websites - Una colección seleccionada
Gumroad - El neobrutalismo bien hecho
Feastables - Un e-commerce neobrutalista y desenfadado

Herramientas:

Neobrutalism - Componentes neobrutalistas listos para usar
Tailwind CSS v4 Docs - La documentación oficial
Google Fonts - Fuentes gratuitas (Archivo Black, Space Grotesk)

Generadores de paletas de colores:

Coolors - Genera combinaciones de colores
Adobe Color - Círculo cromático y herramientas de paletas

Reflexiones finales

Acabas de construir un sitio neobrutalista, de cero a desplegado, en menos de una hora. Eso es realmente impresionante.

Puntos clave:

Neobrutalismo = bordes gruesos + sombras duras + colores atrevidos + cero border-radius
La directiva @theme de Tailwind v4 hace más limpia la personalización
La coherencia es crucial (anchos de borde, sombras, colores)
La accesibilidad sigue importando (el alto contraste ayuda)
Empieza con un design system sólido y luego construye los componentes

Este sitio no es solo una demo: es una plantilla que puedes adaptar a proyectos reales. Cambia los colores, sustituye las fuentes, ajusta las sombras, hazlo tuyo.

¿Lo mejor del neobrutalismo? Que lo perdona todo. La imperfección forma parte de la estética. ¿Ese borde un poco desalineado o ese elemento algo descentrado? No es un bug, es carácter.

Ahora ve y construye algo atrevido que no se parezca al portafolio/SaaS/landing page de todo el mundo.

Y si quieres componentes listos para usar y avanzar aún más rápido, echa un vistazo a Neobrutalism. Es esta estética, empaquetada en componentes para copiar y pegar.

Feliz construcción. 🚀

¿Tienes preguntas? Deja un comentario o escríbeme en Twitter. Me encanta ver lo que la gente construye con este estilo.

¿Quieres el código completo? El archivo HTML íntegro está disponible como GitHub Gist (enlace en los comentarios).

¿Te ha resultado útil? Compártelo con algún desarrollador que necesite escapar de la trampa del diseño aburrido.

← Volver a los artículos

Cómo crear un sitio neobrutalista con Tailwind CSS v4 (paso a paso)

Lo que vamos a construir

Paso 1: preparar el proyecto (5 minutos)

Crea tu proyecto

Inicializa npm e instala Tailwind v4

Crea la estructura del proyecto

Paso 2: configurar Tailwind v4 (3 minutos)

Crea tu archivo de estilos

Paso 3: la estructura HTML (5 minutos)

Configura el servidor de desarrollo

Paso 4: construir la sección hero (10 minutos)

Paso 5: la sección de funcionalidades (10 minutos)

Paso 6: la sección de tarifas (12 minutos)

Paso 7: la sección de testimonios (8 minutos)

Paso 8: el pie de página (5 minutos)

Paso 9: añadir pulido e interacciones (5 minutos)

Desplazamiento suave

Botón del menú móvil

Optimización del rendimiento

Paso 10: pruebas y ajustes (5 minutos)

Pruebas de responsividad

Comprobación de accesibilidad

Comprobación del rendimiento

Bonus: pasar a React/Next.js

Errores comunes y cómo evitarlos

1. Anchos de borde incoherentes

2. Olvidar los desplazamientos de sombra en móvil

3. Demasiados colores de acento

4. Descuidar la accesibilidad

5. Sombras suaves que se cuelan

Próximos pasos y recursos

Qué hacer a continuación

Recursos útiles

Reflexiones finales

20 paletas de colores neobrutalistas con códigos hex (listas para copiar y pegar)

Cómo convertir cualquier proyecto React al neobrutalismo en 10 minutos

Neobrutalismo vs minimalismo: cuándo usar cada uno (y cuándo no)

Cómo crear un sitio neobrutalista con Tailwind CSS v4 (paso a paso)

Lo que vamos a construir

Paso 1: preparar el proyecto (5 minutos)

Crea tu proyecto

Inicializa npm e instala Tailwind v4

Crea la estructura del proyecto

Paso 2: configurar Tailwind v4 (3 minutos)

Crea tu archivo de estilos

Paso 3: la estructura HTML (5 minutos)

Configura el servidor de desarrollo

Paso 4: construir la sección hero (10 minutos)

Paso 5: la sección de funcionalidades (10 minutos)

Paso 6: la sección de tarifas (12 minutos)

Paso 7: la sección de testimonios (8 minutos)

Paso 8: el pie de página (5 minutos)

Paso 9: añadir pulido e interacciones (5 minutos)

Desplazamiento suave

Botón del menú móvil

Optimización del rendimiento

Paso 10: pruebas y ajustes (5 minutos)

Pruebas de responsividad

Comprobación de accesibilidad

Comprobación del rendimiento

Bonus: pasar a React/Next.js

Errores comunes y cómo evitarlos

1. Anchos de borde incoherentes

2. Olvidar los desplazamientos de sombra en móvil

3. Demasiados colores de acento

4. Descuidar la accesibilidad

5. Sombras suaves que se cuelan

Próximos pasos y recursos

Qué hacer a continuación

Recursos útiles

Reflexiones finales

Sigue leyendo

20 paletas de colores neobrutalistas con códigos hex (listas para copiar y pegar)

Cómo convertir cualquier proyecto React al neobrutalismo en 10 minutos

Neobrutalismo vs minimalismo: cuándo usar cada uno (y cuándo no)