1 Mei 2026

tailwind css neobrutalisme tutorial pengembangan web css

Cara Membangun Situs Neobrutalis dengan Tailwind CSS v4 (Langkah demi Langkah)

Pelajari cara membangun situs neobrutalis yang lengkap dari nol memakai Tailwind CSS v4. Tutorial praktis ini memandu Anda melalui penyiapan, konfigurasi, dan pembangunan setiap komponen, dengan contoh kode yang bisa Anda salin dan tempel.

Dov Azencot

@DovAzencot

Bagikan di X

Baiklah, para developer. Mari bangun sesuatu yang berani.

Tanpa teori. Tanpa basa-basi. Hanya Anda, saya, dan sebuah terminal. Di akhir tutorial ini, Anda akan punya situs neobrutalis yang berfungsi penuh, dibangun dengan Tailwind CSS v4.

Kita bicara soal:

Garis tepi hitam yang tebal
Bayangan jatuh yang keras
Aksen kuning elektrik
Tipografi yang gempal
Nol sudut membulat

Ini bukan tutorial jenis "ini ada satu komponen". Kita membangun satu landing page utuh dari nol: bagian hero, fitur, harga, footer, semuanya. Setiap baris kode dijelaskan. Setiap keputusan desain dijustifikasi.

Siapkan kopi Anda. Buka terminal Anda. Mari jadi brutal.

Yang Akan Kita Bangun

Sebelum mulai, inilah yang kita buat:

Sebuah landing page untuk produk SaaS fiktif bernama "BoldTask": sebuah perkakas manajemen proyek yang tidak terlihat seperti semua perkakas manajemen proyek lainnya.

Halaman ini akan mencakup:

Bagian hero dengan CTA
Kartu fitur
Tabel harga
Bagian testimoni
Footer

Semua dengan estetika neobrutalis yang khas itu: berani, berkontras tinggi, dan mustahil diabaikan.

Tumpukan teknologi:

Tailwind CSS v4 (yang terbaru dan terbaik)
HTML (atau React/Next.js jika Anda lebih suka)
Google Fonts (Archivo Black + Space Grotesk)

Perkiraan waktu: 45-60 menit jika Anda mengikuti langkahnya

Langkah 1: Menyiapkan Proyek (5 menit)

Mari mulai dari nol. Saya memakai penyiapan HTML sederhana untuk tutorial ini, tetapi Anda bisa dengan mudah mengadaptasinya ke React, Next.js, atau framework apa pun.

Buat Proyek Anda

mkdir neobrutalism-website
cd neobrutalism-website

Inisialisasi npm dan Instal Tailwind v4

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

Catatan: kita menginstal Tailwind v4 (saat ini masih beta, tetapi sudah cukup stabil untuk produksi). Tag @next memberi Anda v4.

Buat Struktur Proyek

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

Struktur folder Anda semestinya terlihat seperti ini:

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

Langkah 2: Mengonfigurasi Tailwind v4 (3 menit)

Tailwind v4 hadir dengan sistem konfigurasi baru yang lebih bersih. Alih-alih tailwind.config.js, kini semuanya dikonfigurasi di dalam CSS.

Buat Berkas Stil Anda

Buka src/styles.css dan tambahkan:

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

Yang baru saja kita lakukan:

Menyiapkan palet warna kustom (hitam, putih, kuning, merah muda, sian)
Menghapus semua nilai border-radius (neobrutalisme = tepi tajam)
Membuat utilitas bayangan keras (dengan offset, tanpa blur)
Menambahkan efek hover tombol kustom yang meniru "tekanan" bayangan

Langkah 3: Struktur HTML (5 menit)

Buat struktur HTML dasar. Buka 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>

Siapkan Server Pengembangan

Kita butuh cara untuk mempratinjau hasil kerja kita. Mari pakai Vite:


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

Tambahkan skrip ini ke package.json Anda:

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

Sekarang jalankan:


pnpm dev
npm run dev
yarn dev
bun dev

Buka http://localhost:5173 di browser Anda. Anda semestinya melihat bilah navigasi dasar dengan branding BoldTask.

Langkah 4: Membangun Bagian Hero (10 menit)

Kini, bintang pertunjukannya. Bagian hero harus BERANI.

Tambahkan ini tepat setelah 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>

Yang kita bangun:

Latar kuning satu layar penuh (dampak seketika)
Judul raksasa memakai Archivo Black
Kotak konten dengan garis tepi tebal dan bayangan keras
CTA dengan efek hover (bayangan bergerak saat kursor melintas)
Metrik bukti sosial
Mockup visual produk (representasi abstrak)
Kartu aksen mengambang untuk memberi kedalaman

Keputusan desain:

Latar kuning = energi tinggi, mustahil diabaikan
Kotak konten putih = menciptakan kontras dan hierarki
CTA hitam di atas kuning = visibilitas maksimal
Kartu sian mengambang = menambahkan asimetri (sebuah prinsip neobrutalis)

Langkah 5: Bagian Fitur (10 menit)

Mari bangun kartu fitur. Tambahkan ini setelah bagian 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>

Yang kita bangun:

6 kartu fitur dalam grid yang responsif
Color blocking (merah muda, sian, kuning, putih) untuk memberi daya tarik visual
Ikon emoji (sederhana, ceria, selaras dengan merek)
Efek hover (kartu terangkat saat kursor melintas)
Garis tepi tebal dan bayangan keras yang selalu konsisten

Pola desain: Perhatikan bagaimana tiga kartu pertama memakai warna aksen (merah muda, sian, kuning) sementara tiga di bawah memakai putih? Ini menciptakan hierarki visual: baris atas mendapat lebih banyak perhatian.

Langkah 6: Bagian Harga (12 menit)

Tabel harga itu krusial. Mari buat mustahil terlewat:

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

Yang kita bangun:

Tiga tingkat harga yang jelas dibedakan
Kode warna (putih = gratis, kuning = populer, sian = premium)
Kartu tengah yang diangkat dan lebih besar (menarik perhatian ke paket yang direkomendasikan)
Lencana "Most Popular" pada paket Pro
Tanda centang fitur (✓ dan ✗) untuk kejelasan
Jaminan uang kembali untuk membangun kepercayaan

Strategi desain:

Latar hitam membuat kartu berwarna MENONJOL
Kartu tengah yang sedikit terangkat menciptakan hierarki visual
Penempatan CTA yang konsisten memudahkan perbandingan
CTA berwarna berbeda cocok dengan latar kartunya

Langkah 7: Bagian Testimoni (8 menit)

Bukti sosial menjual. Mari tambahkan testimoni:

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

Yang kita bangun:

Tiga kartu testimoni dengan gaya yang seragam
Peringkat bintang (kuning = perhatian)
Avatar pengguna (kotak berwarna abstrak alih-alih foto)
Nama dan jabatan untuk kredibilitas

Kenapa avatar abstrak? Foto asli bisa terasa korporat. Kotak berwarna mempertahankan estetika neobrutalis yang ceria dan geometris.

Langkah 8: Footer (5 menit)

Setiap situs butuh footer. Mari buat footer kita penuh karakter:

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

Yang kita bangun:

Footer empat kolom
Merek, navigasi, dan pendaftaran newsletter
Efek hover (tautan berubah menjadi kuning)
Kolom email dengan gaya brutal
Bilah hak cipta di bagian bawah

Langkah 9: Menambahkan Poles dan Interaksi (5 menit)

Mari tambahkan beberapa sentuhan akhir agar situs terasa terpoles.

Pengguliran Mulus

Tambahkan ini ke src/styles.css Anda:

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

Tambahkan JavaScript ini sebelum tag penutup </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>

Optimasi Performa

Tambahkan meta tag ini ke <head> Anda:

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

Langkah 10: Pengujian dan Penyempurnaan (5 menit)

Sekarang uji situs Anda:

Pengujian Responsivitas

Buka DevTools (F12) dan uji breakpoint berikut:

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

Pastikan bahwa:

teks terbaca di semua ukuran
tombol bisa disentuh di seluler (tinggi minimal 44px)
tata letak grid tersusun ulang dengan benar
bayangan tidak terpotong di layar kecil

Pemeriksaan Aksesibilitas

Telusuri daftar periksa ini:

Semua elemen interaktif bisa diakses lewat keyboard (jelajahi halaman dengan Tab)
Kontras warna memenuhi standar WCAG AA (hitam di atas putih ✓, kuning di atas putih ✓)
Gambar memiliki teks alternatif (di sini kita memakai div, tetapi jika menambah gambar, tambahkan alt)
Kolom formulir memiliki label
Keadaan fokus terlihat

Pemeriksaan Performa

Buka Lighthouse di DevTools Chrome dan jalankan audit. Anda semestinya melihat:

Performa: 90+ (sedikit CSS, tanpa framework berat)
Aksesibilitas: 90+ (kontras tinggi, HTML semantik)
Praktik Terbaik: 90+
SEO: 90+

Jika skornya rendah, berikut perbaikan yang umum:

Tambahkan width dan height pada gambar
Minifikasi CSS di produksi
Aktifkan header caching
Kompres gambar

Bonus: Beralih ke React/Next.js

Ingin memakai ini di aplikasi React? Berikut cara mengonversi bagian 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>
  );
}

Lalu, di tailwind.config.ts Anda:

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

Kesalahan Umum dan Cara Menghindarinya

Setelah membangun lusinan situs neobrutalis, berikut kesalahan yang paling sering saya lihat:

1. Lebar Garis Tepi yang Tidak Konsisten

Kesalahan: memakai garis tepi 2px pada sebagian elemen, 5px pada yang lain, dan 3px di tempat lain.

Solusi: pilih 2-3 lebar garis tepi (misalnya 3px standar, 4px untuk penekanan, 6px untuk elemen utama) dan patuhi dari awal sampai akhir.

2. Melupakan Offset Bayangan di Seluler

Kesalahan: offset bayangan 10px di seluler yang terpotong atau memicu pengguliran horizontal.

Solusi: pakai utilitas bayangan yang responsif:

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

3. Terlalu Banyak Warna Aksen

Kesalahan: memakai 5 warna atau lebih dengan anggapan "lebih banyak = lebih brutal".

Solusi: patuhi hitam + putih + maksimal 2-3 warna aksen. Palet kita memakai kuning, merah muda, dan sian, dan itu pun sudah di batasnya.

4. Mengabaikan Aksesibilitas

Kesalahan: teks kuning di atas latar putih (tak terbaca), tanpa keadaan fokus, kontras yang buruk.

Solusi: selalu uji kontras. Pakai teks hitam di atas latar kuning/putih, teks putih di atas latar hitam/gelap.

5. Bayangan Lembut yang Menyelinap Masuk

Kesalahan: tanpa sengaja memakai bayangan bawaan Tailwind (shadow-lg) yang punya blur.

Solusi: buat utilitas bayangan kustom dan nonaktifkan bayangan bawaan jika perlu.

Langkah Berikutnya dan Sumber Daya

Selamat. Anda baru saja membangun situs neobrutalis yang lengkap dari nol.

Apa yang Harus Dilakukan Selanjutnya

1. Publikasikan

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

2. Tambahkan Fungsionalitas

Hubungkan formulir newsletter ke sebuah layanan (ConvertKit, Mailchimp)
Terapkan CTA harga dengan Stripe
Tambahkan analitik (Plausible, Fathom)

3. Perluas Design System

Buat lebih banyak komponen (modal, dropdown, tooltip)
Bangun halaman tambahan (tentang kami, blog, kontak)
Tambahkan mode gelap (neobrutalisme juga berfungsi hebat dalam mode gelap)

4. Optimalkan Lebih Jauh

Minifikasi CSS dan HTML
Tambahkan optimasi gambar
Terapkan strategi caching
Pertimbangkan generator situs statis untuk performa yang lebih baik lagi

Sumber Daya yang Bermanfaat

Inspirasi desain:

Brutalist Websites - Koleksi kurasi
Gumroad - Neobrutalisme yang dikerjakan dengan benar
Feastables - E-commerce neobrutalis yang ceria

Perkakas:

Neobrutalism - Komponen neobrutalis siap pakai
Tailwind CSS v4 Docs - Dokumentasi resmi
Google Fonts - Font gratis (Archivo Black, Space Grotesk)

Generator palet warna:

Coolors - Menghasilkan skema warna
Adobe Color - Roda warna dan perkakas palet

Renungan Akhir

Anda baru saja membangun situs neobrutalis, dari nol hingga terpublikasi, dalam waktu kurang dari satu jam. Itu benar-benar mengesankan.

Poin utama:

Neobrutalisme = garis tepi tebal + bayangan keras + warna berani + nol border-radius
Direktif @theme di Tailwind v4 membuat kustomisasi lebih bersih
Konsistensi itu krusial (lebar garis tepi, bayangan, warna)
Aksesibilitas tetap penting (kontras tinggi membantu)
Mulai dari design system yang solid, lalu bangun komponennya

Situs ini bukan sekadar demo: ia adalah template yang bisa Anda adaptasi untuk proyek nyata. Ganti warnanya, tukar fontnya, sesuaikan bayangannya, jadikan milik Anda.

Bagian terbaik dari neobrutalisme? Ia pemaaf. Ketidaksempurnaan adalah bagian dari estetikanya. Garis tepi yang sedikit tak lurus atau elemen yang agak tak di tengah? Itu bukan bug, itu karakter.

Sekarang pergilah bangun sesuatu yang berani yang tidak terlihat seperti portofolio/SaaS/landing page milik orang lain.

Dan jika Anda ingin komponen siap pakai supaya bisa bergerak lebih cepat lagi, lihat Neobrutalism. Ini adalah estetika tersebut, dikemas sebagai komponen salin-tempel.

Selamat membangun. 🚀

Punya pertanyaan? Tinggalkan komentar atau hubungi saya di Twitter. Saya senang melihat apa yang orang bangun dengan gaya ini.

Ingin kode lengkapnya? Berkas HTML utuh tersedia sebagai GitHub Gist (tautan di komentar).

Merasa ini bermanfaat? Bagikan ke seorang developer yang perlu lepas dari jebakan desain yang membosankan.

← Kembali ke artikel

Cara Membangun Situs Neobrutalis dengan Tailwind CSS v4 (Langkah demi Langkah)

Yang Akan Kita Bangun

Langkah 1: Menyiapkan Proyek (5 menit)

Buat Proyek Anda

Inisialisasi npm dan Instal Tailwind v4

Buat Struktur Proyek

Langkah 2: Mengonfigurasi Tailwind v4 (3 menit)

Buat Berkas Stil Anda

Langkah 3: Struktur HTML (5 menit)

Siapkan Server Pengembangan

Langkah 4: Membangun Bagian Hero (10 menit)

Langkah 5: Bagian Fitur (10 menit)

Langkah 6: Bagian Harga (12 menit)

Langkah 7: Bagian Testimoni (8 menit)

Langkah 8: Footer (5 menit)

Langkah 9: Menambahkan Poles dan Interaksi (5 menit)

Pengguliran Mulus

Tombol Menu Seluler

Optimasi Performa

Langkah 10: Pengujian dan Penyempurnaan (5 menit)

Pengujian Responsivitas

Pemeriksaan Aksesibilitas

Pemeriksaan Performa

Bonus: Beralih ke React/Next.js

Kesalahan Umum dan Cara Menghindarinya

1. Lebar Garis Tepi yang Tidak Konsisten

2. Melupakan Offset Bayangan di Seluler

3. Terlalu Banyak Warna Aksen

4. Mengabaikan Aksesibilitas

5. Bayangan Lembut yang Menyelinap Masuk

Langkah Berikutnya dan Sumber Daya

Apa yang Harus Dilakukan Selanjutnya

Sumber Daya yang Bermanfaat

Renungan Akhir

20 Palet Warna Neobrutalisme dengan Kode Hex (Siap Salin & Tempel)

Cara Mengubah Proyek React Apa Pun ke Neobrutalisme dalam 10 Menit

Neobrutalisme vs minimalisme: kapan memakai yang mana (dan kapan tidak)

Cara Membangun Situs Neobrutalis dengan Tailwind CSS v4 (Langkah demi Langkah)

Yang Akan Kita Bangun

Langkah 1: Menyiapkan Proyek (5 menit)

Buat Proyek Anda

Inisialisasi npm dan Instal Tailwind v4

Buat Struktur Proyek

Langkah 2: Mengonfigurasi Tailwind v4 (3 menit)

Buat Berkas Stil Anda

Langkah 3: Struktur HTML (5 menit)

Siapkan Server Pengembangan

Langkah 4: Membangun Bagian Hero (10 menit)

Langkah 5: Bagian Fitur (10 menit)

Langkah 6: Bagian Harga (12 menit)

Langkah 7: Bagian Testimoni (8 menit)

Langkah 8: Footer (5 menit)

Langkah 9: Menambahkan Poles dan Interaksi (5 menit)

Pengguliran Mulus

Tombol Menu Seluler

Optimasi Performa

Langkah 10: Pengujian dan Penyempurnaan (5 menit)

Pengujian Responsivitas

Pemeriksaan Aksesibilitas

Pemeriksaan Performa

Bonus: Beralih ke React/Next.js

Kesalahan Umum dan Cara Menghindarinya

1. Lebar Garis Tepi yang Tidak Konsisten

2. Melupakan Offset Bayangan di Seluler

3. Terlalu Banyak Warna Aksen

4. Mengabaikan Aksesibilitas

5. Bayangan Lembut yang Menyelinap Masuk

Langkah Berikutnya dan Sumber Daya

Apa yang Harus Dilakukan Selanjutnya

Sumber Daya yang Bermanfaat

Renungan Akhir

Lanjutkan membaca

20 Palet Warna Neobrutalisme dengan Kode Hex (Siap Salin & Tempel)

Cara Mengubah Proyek React Apa Pun ke Neobrutalisme dalam 10 Menit

Neobrutalisme vs minimalisme: kapan memakai yang mana (dan kapan tidak)