1 Mayıs 2026

tailwind css neobrütalizm eğitim web geliştirme css

Tailwind CSS v4 ile Neobrütalist Bir Web Sitesi Nasıl Kurulur (Adım Adım)

Tailwind CSS v4 kullanarak sıfırdan eksiksiz bir neobrütalist web sitesi kurmayı öğrenin. Bu uygulamalı eğitim, kopyalayıp yapıştırabileceğiniz kod örnekleriyle sizi kurulum, yapılandırma ve her bileşenin inşası boyunca yönlendiriyor.

Dov Azencot

@DovAzencot

X'te paylaşın

Pekâlâ geliştiriciler. Cesur bir şey kuralım.

Teori yok. Dolgu yok. Sadece siz, ben ve bir terminal. Bu eğitimin sonunda, Tailwind CSS v4 ile kurulmuş, tam işlevsel bir neobrütalist web siteniz olacak.

Bahsettiğimiz şeyler:

Kalın siyah kenarlıklar
Sert düşen gölgeler
Elektrik sarısı vurgular
İri tipografi
Sıfır yuvarlatılmış köşe

Bu, "işte bir bileşen" türünden bir eğitim değil. Sıfırdan eksiksiz bir açılış sayfası kuruyoruz: hero bölümü, özellikler, fiyatlandırma, altbilgi, hepsi. Her kod satırı açıklanmış. Her tasarım kararı gerekçelendirilmiş.

Kahvenizi alın. Terminalinizi açın. Hadi brütalleşelim.

Ne Kuruyoruz

Başlamadan önce, ne yarattığımız şu:

"BoldTask" adlı kurgusal bir SaaS ürünü için bir açılış sayfası: diğer tüm proje yönetimi araçlarına benzemeyen bir proje yönetimi aracı.

Sayfa şunları içerecek:

CTA'lı bir hero bölümü
Özellik kartları
Bir fiyatlandırma tablosu
Bir referans bölümü
Bir altbilgi

Hepsi o kendine has neobrütalist estetikle: cesur, yüksek kontrastlı ve göz ardı edilmesi imkânsız.

Teknoloji yığını:

Tailwind CSS v4 (en yenisi ve en iyisi)
HTML (ya da tercih ederseniz React/Next.js)
Google Fonts (Archivo Black + Space Grotesk)

Tahmini süre: adım adım ilerlerseniz 45-60 dakika

Adım 1: Proje Kurulumu (5 dakika)

Sıfırdan başlayalım. Bu eğitim için basit bir HTML kurulumu kullanıyorum, ama bunu React, Next.js ya da herhangi bir framework'e kolayca uyarlayabilirsiniz.

Projenizi Oluşturun

mkdir neobrutalism-website
cd neobrutalism-website

npm'i Başlatın ve Tailwind v4'ü Kurun

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

Not: Tailwind v4'ü kuruyoruz (şu an beta aşamasında, ama üretim için yeterince kararlı). @next etiketi size v4'ü verir.

Proje Yapısını Oluşturun

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

Klasör yapınız şöyle görünmeli:

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

Adım 2: Tailwind v4'ü Yapılandırın (3 dakika)

Tailwind v4, yeni ve daha temiz bir yapılandırma sistemi getiriyor. tailwind.config.js yerine artık her şey CSS'te yapılandırılıyor.

Stil Dosyanızı Oluşturun

src/styles.css dosyasını açın ve ekleyin:

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

Az önce ne yaptık:

Özel bir renk paleti tanımladık (siyah, beyaz, sarı, pembe, camgöbeği)
Tüm border-radius değerlerini kaldırdık (neobrütalizm = keskin kenarlar)
Sert gölge yardımcı sınıfları oluşturduk (bulanıklık olmadan, kaydırmalı)
Gölgenin "bastırılmasını" taklit eden özel buton hover efektleri ekledik

Adım 3: HTML Yapısı (5 dakika)

Temel HTML yapısını oluşturun. src/index.html dosyasını açın:

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

Geliştirme Sunucusunu Ayarlayın

Çalışmamızı önizlemek için bir yola ihtiyacımız var. Vite kullanalım:


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

Bu betiği package.json dosyanıza ekleyin:

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

Şimdi çalıştırın:


pnpm dev
npm run dev
yarn dev
bun dev

Tarayıcınızda http://localhost:5173 adresini açın. BoldTask markasını taşıyan temel bir gezinme çubuğu görmelisiniz.

Adım 4: Hero Bölümünü Kurun (10 dakika)

Şimdi gösterinin yıldızına. Hero bölümü CESUR olmalı.

Bunu <main> etiketinin hemen ardına ekleyin:

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

Ne kurduk:

Tam ekran sarı bir arka plan (anında etki)
Archivo Black kullanan dev bir başlık
Kalın kenarlıklı ve sert gölgeli bir içerik kutusu
Hover efektli CTA'lar (imleç üzerine gelince gölge kayar)
Sosyal kanıt metrikleri
Ürünün görsel maketi (soyut temsil)
Derinlik için yüzen bir vurgu kartı

Tasarım kararları:

Sarı arka plan = yüksek enerji, göz ardı edilmesi imkânsız
Beyaz içerik kutusu = kontrast ve hiyerarşi yaratır
Sarı üzerine siyah CTA = maksimum görünürlük
Yüzen camgöbeği kart = asimetri ekler (bir neobrütalist ilke)

Adım 5: Özellikler Bölümü (10 dakika)

Özellik kartlarını kuralım. Bunu hero bölümünün ardına ekleyin:

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

Ne kurduk:

Duyarlı bir ızgarada 6 özellik kartı
Görsel ilgi için renk bloklama (pembe, camgöbeği, sarı, beyaz)
Emoji ikonlar (sade, oyunbaz, markayla uyumlu)
Hover efekti (kartlar imleç üzerine gelince yükseliyor)
Sürekli tutarlı kalın kenarlıklar ve sert gölgeler

Tasarım deseni: İlk üç kartın vurgu renkleri (pembe, camgöbeği, sarı), alttaki üçünün ise beyaz kullandığını fark ettiniz mi? Bu, görsel bir hiyerarşi yaratır: üst sıra daha çok dikkat çeker.

Adım 6: Fiyatlandırma Bölümü (12 dakika)

Fiyatlandırma tabloları can alıcıdır. Onları gözden kaçırılması imkânsız kılalım:

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

Ne kurduk:

Net biçimde ayrışan üç fiyat kademesi
Renk kodlaması (beyaz = ücretsiz, sarı = popüler, camgöbeği = premium)
Yükseltilmiş ve daha büyük orta kart (önerilen plana dikkat çeker)
Pro planda bir "Most Popular" rozeti
Netlik için özellik işaretleri (✓ ve ✗)
Güven için para iade garantisi

Tasarım stratejisi:

Siyah arka plan, renkli kartları ÖNE ÇIKARIR
Hafifçe yükseltilmiş orta kart, görsel hiyerarşi yaratır
CTA'yı her zaman aynı yere koymak karşılaştırmayı kolaylaştırır
Farklı renkli CTA'lar, kartlarının arka planıyla uyumludur

Adım 7: Referans Bölümü (8 dakika)

Sosyal kanıt satar. Referanslar ekleyelim:

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

Ne kurduk:

Tutarlı stile sahip üç referans kartı
Yıldız derecelendirmeleri (sarı = dikkat)
Kullanıcı avatarları (fotoğraf yerine soyut renkli kareler)
Güvenilirlik için ad ve unvanlar

Neden soyut avatarlar? Gerçek fotoğraflar kurumsal hissettirebilir. Renkli kareler, oyunbaz ve geometrik neobrütalist estetiği korur.

Adım 8: Altbilgi (5 dakika)

Her web sitesinin bir altbilgiye ihtiyacı var. Bizimkini karakterli yapalım:

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

Ne kurduk:

Dört sütunlu bir altbilgi düzeni
Marka, gezinme ve bülten kaydı
Hover efektleri (bağlantılar sarıya döner)
Brütal stilli bir e-posta giriş alanı
Alt tarafta bir telif hakkı çubuğu

Adım 9: Cila ve Etkileşim Ekleme (5 dakika)

Sitenin cilalı hissettirmesi için birkaç son dokunuş ekleyelim.

Yumuşak Kaydırma

Bunu src/styles.css dosyanıza ekleyin:

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

Mobil Menü Düğmesi

Bu JavaScript'i kapanış </body> etiketinden önce ekleyin:

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

Performans Optimizasyonu

Bu meta etiketleri <head> bölümünüze ekleyin:

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

Adım 10: Test ve İyileştirmeler (5 dakika)

Şimdi sitenizi test edin:

Duyarlılık Testi

DevTools'u (F12) açın ve şu kırılma noktalarını test edin:

Mobil (375px)
Tablet (768px)
Masaüstü (1280px)

Şunlardan emin olun:

metin her boyutta okunabiliyor
butonlar mobilde dokunulabiliyor (en az 44px yükseklik)
ızgara düzenleri doğru biçimde yeniden diziliyor
gölgeler küçük ekranlarda kesilmiyor

Erişilebilirlik Denetimi

Bu kontrol listesini gözden geçirin:

Tüm etkileşimli öğeler klavyeyle erişilebilir (sayfada Tab ile gezinin)
Renk kontrastı WCAG AA ölçütlerini karşılıyor (beyaz üzerine siyah ✓, beyaz üzerine sarı ✓)
Resimlerin alternatif metni var (burada div kullandık, ama resim eklerseniz alt ekleyin)
Form alanlarının etiketleri var
Odak durumları görünür

Performans Denetimi

Chrome DevTools'ta Lighthouse'u açın ve bir denetim çalıştırın. Şunları görmelisiniz:

Performans: 90+ (az CSS, ağır framework yok)
Erişilebilirlik: 90+ (yüksek kontrast, anlamsal HTML)
En İyi Uygulamalar: 90+
SEO: 90+

Puanlar düşükse, sık kullanılan düzeltmeler:

Resimlere width ve height ekleyin
Üretimde CSS'i küçültün
Önbellekleme başlıklarını etkinleştirin
Resimleri sıkıştırın

Bonus: React/Next.js'e Geçiş

Bunu bir React uygulamasında mı kullanmak istiyorsunuz? İşte hero bölümünü nasıl dönüştüreceğiniz:

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

Sonra tailwind.config.ts dosyanızda:

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

Sık Yapılan Hatalar ve Bunlardan Nasıl Kaçınılır

Düzinelerce neobrütalist site kurduktan sonra, en sık gördüğüm tuzaklar şunlar:

1. Tutarsız Kenarlık Kalınlıkları

Hata: Bazı öğelerde 2px, bazılarında 5px, başka bir yerde 3px kenarlık kullanmak.

Çözüm: 2-3 kenarlık kalınlığı seçin (ör. standart 3px, vurgu için 4px, ana öğeler için 6px) ve baştan sona onlara bağlı kalın.

2. Mobilde Gölge Kaydırmalarını Unutmak

Hata: Mobilde kesilen ya da yatay kaydırmaya yol açan 10px gölge kaydırmaları.

Çözüm: Duyarlı gölge yardımcı sınıfları kullanın:

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

3. Çok Fazla Vurgu Rengi

Hata: "daha fazla = daha brütal" diye düşünüp 5 veya daha fazla renk kullanmak.

Çözüm: Siyah + beyaz + en fazla 2-3 vurgu rengiyle sınırlı kalın. Bizim paletimiz sarı, pembe ve camgöbeği kullanıyor ve bu bile sınırda.

4. Erişilebilirliği İhmal Etmek

Hata: Beyaz arka plan üzerine sarı metin (okunamaz), odak durumu yok, zayıf kontrast.

Çözüm: Her zaman kontrastı test edin. Sarı/beyaz arka planlarda siyah metin, siyah/koyu arka planlarda beyaz metin kullanın.

5. Sızan Yumuşak Gölgeler

Hata: İstemeden Tailwind'in bulanıklık içeren varsayılan gölgelerini (shadow-lg) kullanmak.

Çözüm: Özel gölge yardımcı sınıfları oluşturun ve gerekirse varsayılan gölgeleri devre dışı bırakın.

Sonraki Adımlar ve Kaynaklar

Tebrikler. Az önce sıfırdan eksiksiz bir neobrütalist web sitesi kurdunuz.

Bundan Sonra Ne Yapmalı

1. Yayına Alın

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

2. İşlevsellik Ekleyin

Bülten formunu bir servise bağlayın (ConvertKit, Mailchimp)
Fiyatlandırma CTA'larını Stripe ile uygulayın
Analitik ekleyin (Plausible, Fathom)

3. Tasarım Sistemini Genişletin

Daha fazla bileşen oluşturun (modallar, açılır menüler, ipuçları)
Ek sayfalar kurun (hakkımızda, blog, iletişim)
Karanlık mod ekleyin (neobrütalizm karanlık modda da harika çalışır)

4. Daha da Optimize Edin

CSS ve HTML'i küçültün
Resim optimizasyonu ekleyin
Önbellekleme stratejileri uygulayın
Daha da iyi performans için bir statik site oluşturucu düşünün

Yararlı Kaynaklar

Tasarım ilhamı:

Brutalist Websites - Seçilmiş bir koleksiyon
Gumroad - Doğru yapılmış neobrütalizm
Feastables - Oyunbaz bir neobrütalist e-ticaret

Araçlar:

Neobrutalism - Hazır neobrütalist bileşenler
Tailwind CSS v4 Docs - Resmî dokümantasyon
Google Fonts - Ücretsiz fontlar (Archivo Black, Space Grotesk)

Renk paleti oluşturucular:

Coolors - Renk şemaları üretin
Adobe Color - Renk çemberi ve palet araçları

Son Düşünceler

Az önce bir neobrütalist web sitesini sıfırdan yayına alana kadar bir saatin altında kurdunuz. Bu gerçekten etkileyici.

Önemli çıkarımlar:

Neobrütalizm = kalın kenarlıklar + sert gölgeler + cesur renkler + sıfır border-radius
Tailwind v4'ün @theme direktifi, özelleştirmeyi daha temiz kılar
Tutarlılık can alıcıdır (kenarlık kalınlıkları, gölgeler, renkler)
Erişilebilirlik hâlâ önemlidir (yüksek kontrast yardımcı olur)
Sağlam bir tasarım sistemiyle başlayın, sonra bileşenleri kurun

Bu site sadece bir demo değil: gerçek projeler için uyarlayabileceğiniz bir şablon. Renkleri değiştirin, fontları takas edin, gölgeleri ayarlayın, kendinize ait kılın.

Neobrütalizmin en güzel yanı mı? Bağışlayıcı olması. Kusur, estetiğin bir parçası. Şu hafifçe hizasız kenarlık ya da o merkezden biraz kaymış öğe mi? O bir hata değil, karakter.

Şimdi gidin ve herkesin portföyüne/SaaS'ına/açılış sayfasına benzemeyen, cesur bir şey kurun.

Ve daha da hızlı ilerlemek için hazır bileşenler istiyorsanız, Neobrutalism'ye göz atın. Bu estetiğin, kopyala-yapıştır bileşenleri olarak paketlenmiş hâli.

İyi kurmalar. 🚀

Sorularınız mı var? Bir yorum bırakın ya da Twitter'dan ulaşın. İnsanların bu stille ne kurduğunu görmeyi çok seviyorum.

Kodun tamamını mı istiyorsunuz? HTML dosyasının tamamı bir GitHub Gist olarak mevcut (bağlantı yorumlarda).

Bunu yararlı mı buldunuz? Sıkıcı tasarım tuzağından kaçması gereken bir geliştiriciyle paylaşın.

← Yazılara dönün

Tailwind CSS v4 ile Neobrütalist Bir Web Sitesi Nasıl Kurulur (Adım Adım)

Ne Kuruyoruz

Adım 1: Proje Kurulumu (5 dakika)

Projenizi Oluşturun

npm'i Başlatın ve Tailwind v4'ü Kurun

Proje Yapısını Oluşturun

Adım 2: Tailwind v4'ü Yapılandırın (3 dakika)

Stil Dosyanızı Oluşturun

Adım 3: HTML Yapısı (5 dakika)

Geliştirme Sunucusunu Ayarlayın

Adım 4: Hero Bölümünü Kurun (10 dakika)

Adım 5: Özellikler Bölümü (10 dakika)

Adım 6: Fiyatlandırma Bölümü (12 dakika)

Adım 7: Referans Bölümü (8 dakika)

Adım 8: Altbilgi (5 dakika)

Adım 9: Cila ve Etkileşim Ekleme (5 dakika)

Yumuşak Kaydırma

Mobil Menü Düğmesi

Performans Optimizasyonu

Adım 10: Test ve İyileştirmeler (5 dakika)

Duyarlılık Testi

Erişilebilirlik Denetimi

Performans Denetimi

Bonus: React/Next.js'e Geçiş

Sık Yapılan Hatalar ve Bunlardan Nasıl Kaçınılır

1. Tutarsız Kenarlık Kalınlıkları

2. Mobilde Gölge Kaydırmalarını Unutmak

3. Çok Fazla Vurgu Rengi

4. Erişilebilirliği İhmal Etmek

5. Sızan Yumuşak Gölgeler

Sonraki Adımlar ve Kaynaklar

Bundan Sonra Ne Yapmalı

Yararlı Kaynaklar

Son Düşünceler

Hex Kodlu 20 Neobrütalizm Renk Paleti (Kopyala-Yapıştır Hazır)

Herhangi Bir React Projesi 10 Dakikada Neobrütalizme Nasıl Dönüştürülür

Neobrütalizm vs. minimalizm: hangisini ne zaman kullanmalı (ve ne zaman kullanmamalı)

Tailwind CSS v4 ile Neobrütalist Bir Web Sitesi Nasıl Kurulur (Adım Adım)

Ne Kuruyoruz

Adım 1: Proje Kurulumu (5 dakika)

Projenizi Oluşturun

npm'i Başlatın ve Tailwind v4'ü Kurun

Proje Yapısını Oluşturun

Adım 2: Tailwind v4'ü Yapılandırın (3 dakika)

Stil Dosyanızı Oluşturun

Adım 3: HTML Yapısı (5 dakika)

Geliştirme Sunucusunu Ayarlayın

Adım 4: Hero Bölümünü Kurun (10 dakika)

Adım 5: Özellikler Bölümü (10 dakika)

Adım 6: Fiyatlandırma Bölümü (12 dakika)

Adım 7: Referans Bölümü (8 dakika)

Adım 8: Altbilgi (5 dakika)

Adım 9: Cila ve Etkileşim Ekleme (5 dakika)

Yumuşak Kaydırma

Mobil Menü Düğmesi

Performans Optimizasyonu

Adım 10: Test ve İyileştirmeler (5 dakika)

Duyarlılık Testi

Erişilebilirlik Denetimi

Performans Denetimi

Bonus: React/Next.js'e Geçiş

Sık Yapılan Hatalar ve Bunlardan Nasıl Kaçınılır

1. Tutarsız Kenarlık Kalınlıkları

2. Mobilde Gölge Kaydırmalarını Unutmak

3. Çok Fazla Vurgu Rengi

4. Erişilebilirliği İhmal Etmek

5. Sızan Yumuşak Gölgeler

Sonraki Adımlar ve Kaynaklar

Bundan Sonra Ne Yapmalı

Yararlı Kaynaklar

Son Düşünceler

İlgili yazılar

Hex Kodlu 20 Neobrütalizm Renk Paleti (Kopyala-Yapıştır Hazır)

Herhangi Bir React Projesi 10 Dakikada Neobrütalizme Nasıl Dönüştürülür

Neobrütalizm vs. minimalizm: hangisini ne zaman kullanmalı (ve ne zaman kullanmamalı)