Bỏ qua đến nội dung
1.6k

1 tháng 05, 2026

tailwind cssneo-brutalismhướng dẫnphát triển webcss

Cách xây một website neo-brutalism với Tailwind CSS v4 (từng bước)

Học cách xây một website neo-brutalist hoàn chỉnh từ đầu bằng Tailwind CSS v4. Bài hướng dẫn thực hành này dẫn bạn qua khâu thiết lập, cấu hình và dựng từng thành phần, với các ví dụ code bạn có thể sao chép và dán.

DA

Dov Azencot

@DovAzencot
Chia sẻ lên X

Được rồi, các lập trình viên. Cùng xây một thứ gì đó táo bạo.


Không lý thuyết. Không lấp chỗ trống. Chỉ có bạn, tôi và một terminal. Đến cuối bài hướng dẫn này, bạn sẽ có một website neo-brutalist hoạt động đầy đủ, được xây bằng Tailwind CSS v4.


Chúng ta đang nói đến:

  • Đường viền đen dày
  • Bóng đổ cứng
  • Điểm nhấn vàng điện
  • Typography đồ sộ
  • Không một góc bo tròn nào

Đây không phải kiểu hướng dẫn "đây là một thành phần". Chúng ta xây cả một landing page từ đầu: khu vực hero, tính năng, bảng giá, footer, tất tần tật. Từng dòng code được giải thích. Từng quyết định thiết kế được lý giải.


Lấy cà phê của bạn ra. Mở terminal của bạn lên. Cùng trở nên brutal.



Chúng ta sẽ xây gì

Trước khi bắt đầu, đây là thứ chúng ta tạo ra:


Một landing page cho một sản phẩm SaaS hư cấu tên "BoldTask": một công cụ quản lý dự án không giống mọi công cụ quản lý dự án khác.


Trang sẽ bao gồm:

  • Một khu vực hero kèm CTA
  • Các thẻ tính năng
  • Một bảng giá
  • Một khu vực đánh giá
  • Một footer

Tất cả với thẩm mỹ neo-brutalist đặc trưng đó: táo bạo, tương phản cao và không thể bị bỏ qua.


Bộ công nghệ:

  • Tailwind CSS v4 (mới nhất và tốt nhất)
  • HTML (hoặc React/Next.js nếu bạn thích)
  • Google Fonts (Archivo Black + Space Grotesk)

Thời gian ước tính: 45-60 phút nếu bạn làm theo từng bước



Bước 1: Thiết lập dự án (5 phút)

Cùng bắt đầu từ con số 0. Tôi dùng một thiết lập HTML đơn giản cho bài hướng dẫn này, nhưng bạn có thể dễ dàng điều chỉnh cho React, Next.js hay bất kỳ framework nào.


Tạo dự án của bạn

mkdir neobrutalism-website
cd neobrutalism-website

Khởi tạo npm và cài Tailwind v4

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

Lưu ý: Chúng ta cài Tailwind v4 (hiện đang ở giai đoạn beta, nhưng đã đủ ổn định cho môi trường production). Thẻ @next sẽ mang lại cho bạn v4.


Tạo cấu trúc dự án

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

Cấu trúc thư mục của bạn sẽ trông như thế này:

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


Bước 2: Cấu hình Tailwind v4 (3 phút)

Tailwind v4 mang đến một hệ thống cấu hình mới, gọn gàng hơn. Thay vì tailwind.config.js, giờ mọi thứ được cấu hình trong CSS.


Tạo tệp style của bạn

Mở src/styles.css và thêm:

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

Điều chúng ta vừa làm:

  • Thiết lập một bảng màu tùy chỉnh (đen, trắng, vàng, hồng, cyan)
  • Xóa mọi giá trị border-radius (neo-brutalism = cạnh sắc)
  • Tạo các utility bóng đổ cứng (có độ lệch, không blur)
  • Thêm hiệu ứng hover tùy chỉnh cho nút, mô phỏng việc bóng đổ bị "nhấn xuống"


Bước 3: Cấu trúc HTML (5 phút)

Tạo cấu trúc HTML cơ bản. Mở 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>

Thiết lập server phát triển

Chúng ta cần một cách để xem trước công việc của mình. Cùng dùng Vite:

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

Thêm script này vào package.json của bạn:

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

Giờ chạy:

pnpm dev
npm run dev
yarn dev
bun dev

Mở http://localhost:5173 trong trình duyệt của bạn. Bạn sẽ thấy một thanh điều hướng cơ bản với thương hiệu BoldTask.



Bước 4: Dựng khu vực hero (10 phút)

Giờ đến ngôi sao của màn trình diễn. Khu vực hero phải TÁO BẠO.


Thêm cái này ngay sau thẻ <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>

Điều chúng ta đã dựng:

  • Một nền vàng toàn màn hình (tác động tức thì)
  • Một tiêu đề khổng lồ dùng Archivo Black
  • Một hộp nội dung với đường viền dày và bóng đổ cứng
  • Các CTA có hiệu ứng hover (bóng đổ dịch chuyển khi rê chuột)
  • Các số liệu bằng chứng xã hội
  • Một mockup trực quan của sản phẩm (biểu diễn trừu tượng)
  • Một thẻ nhấn nổi để tạo chiều sâu

Các quyết định thiết kế:

  • Nền vàng = năng lượng cao, không thể bị bỏ qua
  • Hộp nội dung trắng = tạo tương phản và phân cấp
  • CTA đen trên nền vàng = độ hiển thị tối đa
  • Thẻ cyan nổi = thêm sự bất đối xứng (một nguyên tắc neo-brutalist)


Bước 5: Khu vực tính năng (10 phút)

Cùng dựng các thẻ tính năng. Thêm cái này sau khu vực 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>

Điều chúng ta đã dựng:

  • 6 thẻ tính năng trong một grid responsive
  • Color blocking (hồng, cyan, vàng, trắng) để tạo điểm thú vị thị giác
  • Icon emoji (đơn giản, vui tươi, đúng chất thương hiệu)
  • Hiệu ứng hover (thẻ nâng lên khi rê chuột)
  • Đường viền dày và bóng đổ cứng nhất quán

Mẫu hình thiết kế: Bạn có để ý ba thẻ đầu tiên dùng màu nhấn (hồng, cyan, vàng) trong khi ba thẻ dưới dùng trắng không? Điều này tạo một phân cấp thị giác: hàng trên thu hút nhiều chú ý hơn.



Bước 6: Khu vực bảng giá (12 phút)

Bảng giá rất then chốt. Cùng làm cho chúng không thể bỏ sót:

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

Điều chúng ta đã dựng:

  • Ba bậc giá được phân biệt rõ ràng
  • Mã hóa bằng màu (trắng = miễn phí, vàng = phổ biến, cyan = cao cấp)
  • Thẻ ở giữa được nâng lên và lớn hơn (thu hút chú ý vào gói được khuyên dùng)
  • Một huy hiệu "Most Popular" trên gói Pro
  • Dấu tích tính năng (✓ và ✗) để rõ ràng
  • Một cam kết hoàn tiền để tạo niềm tin

Chiến lược thiết kế:

  • Nền đen làm các thẻ màu NỔI BẬT
  • Thẻ giữa được nâng lên nhẹ tạo phân cấp thị giác
  • Vị trí CTA nhất quán giúp so sánh dễ dàng
  • Các CTA màu khác nhau khớp với nền của thẻ


Bước 7: Khu vực đánh giá (8 phút)

Bằng chứng xã hội giúp bán hàng. Cùng thêm các đánh giá:

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

Điều chúng ta đã dựng:

  • Ba thẻ đánh giá với phong cách nhất quán
  • Xếp hạng sao (vàng = chú ý)
  • Ảnh đại diện người dùng (những ô vuông màu trừu tượng thay vì ảnh)
  • Tên và chức danh để tăng độ tin cậy

Vì sao dùng ảnh đại diện trừu tượng? Ảnh thật có thể cảm giác doanh nghiệp. Các ô vuông màu giữ được thẩm mỹ neo-brutalist vui tươi và hình học.



Bước 8: Footer (5 phút)

Mọi website đều cần một footer. Cùng làm cho footer của chúng ta có chất riêng:

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

Điều chúng ta đã dựng:

  • Một bố cục footer bốn cột
  • Thương hiệu, điều hướng và đăng ký nhận bản tin
  • Hiệu ứng hover (các liên kết chuyển sang màu vàng)
  • Một ô nhập email với phong cách brutal
  • Một thanh bản quyền ở dưới cùng


Bước 9: Thêm phần trau chuốt và tương tác (5 phút)

Cùng thêm vài chi tiết cuối để trang cảm giác được trau chuốt.


Cuộn mượt

Thêm cái này vào src/styles.css của bạn:

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

Nút bật/tắt menu di động

Thêm đoạn JavaScript này trước thẻ đóng </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>

Tối ưu hiệu năng

Thêm các thẻ meta này vào <head> của bạn:

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


Bước 10: Kiểm thử và tinh chỉnh (5 phút)

Giờ hãy kiểm thử website của bạn:


Kiểm thử responsive

Mở DevTools (F12) và kiểm thử các breakpoint này:

  • Di động (375px)
  • Tablet (768px)
  • Máy tính (1280px)

Hãy đảm bảo rằng:

  • chữ dễ đọc ở mọi kích thước
  • nút có thể chạm được trên di động (cao ít nhất 44px)
  • các bố cục grid xếp lại đúng cách
  • bóng đổ không bị cắt trên màn hình nhỏ

Kiểm tra khả năng tiếp cận

Rà qua danh sách kiểm tra này:

  • Mọi phần tử tương tác đều truy cập được bằng bàn phím (di chuyển qua trang bằng Tab)
  • Độ tương phản màu đạt chuẩn WCAG AA (đen trên trắng ✓, vàng trên trắng ✓)
  • Ảnh có văn bản thay thế (ở đây ta dùng div, nhưng nếu bạn thêm ảnh, hãy thêm alt)
  • Các ô nhập của biểu mẫu có nhãn
  • Các trạng thái focus đều hiện rõ

Kiểm tra hiệu năng

Mở Lighthouse trong Chrome DevTools và chạy một lần kiểm định. Bạn sẽ thấy:

  • Hiệu năng: 90+ (ít CSS, không framework nặng)
  • Khả năng tiếp cận: 90+ (tương phản cao, HTML ngữ nghĩa)
  • Thực hành tốt: 90+
  • SEO: 90+

Nếu điểm số thấp, đây là các cách khắc phục thường gặp:

  • Thêm width và height cho ảnh
  • Minify CSS ở môi trường production
  • Bật các header caching
  • Nén ảnh


Bonus: Chuyển sang React/Next.js

Muốn dùng cái này trong một ứng dụng React? Đây là cách chuyển đổi khu vực 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>
  );
}

Rồi trong tailwind.config.ts của bạn:

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


Những lỗi thường gặp và cách tránh

Sau khi dựng hàng chục website neo-brutalist, đây là những cạm bẫy tôi thấy thường xuyên nhất:


1. Độ dày đường viền không nhất quán

Lỗi: Dùng đường viền 2px ở một số phần tử, 5px ở phần tử khác, 3px ở nơi nào đó.

Cách khắc phục: Chọn 2-3 độ dày đường viền (ví dụ 3px chuẩn, 4px để nhấn mạnh, 6px cho các phần tử chính) và bám theo chúng từ đầu đến cuối.


2. Quên độ lệch bóng đổ trên di động

Lỗi: Độ lệch bóng đổ 10px trên di động bị cắt hoặc gây cuộn ngang.

Cách khắc phục: Dùng các utility bóng đổ responsive:

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

3. Quá nhiều màu nhấn

Lỗi: Dùng từ 5 màu trở lên với suy nghĩ "nhiều hơn = brutal hơn".

Cách khắc phục: Bám vào đen + trắng + tối đa 2-3 màu nhấn. Bảng màu của chúng ta dùng vàng, hồng và cyan, và như thế đã là ở ngưỡng rồi.


4. Xem nhẹ khả năng tiếp cận

Lỗi: Chữ vàng trên nền trắng (không đọc được), không có trạng thái focus, tương phản kém.

Cách khắc phục: Luôn kiểm thử tương phản. Dùng chữ đen trên nền vàng/trắng, chữ trắng trên nền đen/tối.


5. Bóng đổ mềm lẻn vào

Lỗi: Vô tình dùng các bóng đổ mặc định của Tailwind (shadow-lg) vốn có blur.

Cách khắc phục: Tạo các utility bóng đổ tùy chỉnh và tắt các bóng đổ mặc định nếu cần.



Các bước tiếp theo và tài nguyên

Chúc mừng. Bạn vừa dựng một website neo-brutalist hoàn chỉnh từ con số 0.


Làm gì tiếp theo

1. Đưa nó lên online

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

2. Thêm tính năng

  • Kết nối biểu mẫu bản tin với một dịch vụ (ConvertKit, Mailchimp)
  • Triển khai các CTA bảng giá với Stripe
  • Thêm phân tích (Plausible, Fathom)

3. Mở rộng design system

  • Tạo thêm thành phần (modal, dropdown, tooltip)
  • Dựng thêm các trang (giới thiệu, blog, liên hệ)
  • Thêm chế độ tối (neo-brutalism cũng hoạt động rất tốt ở chế độ tối)

4. Tối ưu thêm nữa

  • Minify CSS và HTML
  • Thêm tối ưu ảnh
  • Triển khai các chiến lược caching
  • Cân nhắc một trình tạo trang tĩnh để có hiệu năng tốt hơn nữa

Tài nguyên hữu ích

Cảm hứng thiết kế:

  • Brutalist Websites - Một bộ sưu tập được tuyển chọn
  • Gumroad - Neo-brutalism làm đúng cách
  • Feastables - Một sàn thương mại điện tử neo-brutalist vui tươi

Công cụ:


Trình tạo bảng màu:

  • Coolors - Tạo các bảng phối màu
  • Adobe Color - Vòng tròn màu và các công cụ bảng màu


Vài suy nghĩ cuối

Bạn vừa dựng một website neo-brutalist, từ con số 0 đến khi đưa lên online, trong chưa đầy một giờ. Điều đó thực sự ấn tượng.


Những điểm chính:

  • Neo-brutalism = đường viền dày + bóng đổ cứng + màu táo bạo + border-radius bằng 0
  • Chỉ thị @theme của Tailwind v4 khiến việc tùy biến gọn gàng hơn
  • Sự nhất quán là then chốt (độ dày đường viền, bóng đổ, màu sắc)
  • Khả năng tiếp cận vẫn quan trọng (tương phản cao rất có ích)
  • Bắt đầu bằng một design system vững chắc, rồi mới dựng các thành phần

Trang này không chỉ là một bản demo: nó là một template bạn có thể điều chỉnh cho các dự án thực tế. Đổi màu, thay phông, chỉnh bóng đổ, biến nó thành của bạn.


Điều tuyệt nhất ở neo-brutalism? Nó bao dung. Sự không hoàn hảo là một phần của thẩm mỹ. Cái đường viền hơi lệch hay phần tử hơi lệch tâm đó? Đó không phải lỗi, đó là chất riêng.


Giờ thì đi và xây một thứ gì đó táo bạo không giống portfolio/SaaS/landing page của mọi người khác.


Và nếu bạn muốn các thành phần dựng sẵn để đi nhanh hơn nữa, hãy ghé Neobrutalism. Đó chính là thẩm mỹ này, được đóng gói thành các thành phần sao chép-và-dán.


Chúc xây vui vẻ. 🚀




Có câu hỏi? Để lại một bình luận hoặc liên hệ trên Twitter. Tôi rất thích xem mọi người xây gì với phong cách này.

Muốn toàn bộ code? Tệp HTML đầy đủ có sẵn dưới dạng một GitHub Gist (liên kết trong phần bình luận).

Thấy bài này hữu ích? Hãy chia sẻ với một lập trình viên cần thoát khỏi cái bẫy thiết kế nhàm chán.

Bài viết liên quan

← Quay lại các bài viết