UI NEO BRUTALISM
CONTOH UI NEO BRUTALISM UNTUK REFERENSI WEBSITE ANDA
25
11
2
HTML
Preview code siap copy
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Zyphra Neobrutalism UI</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
font-family: Inter, system-ui, sans-serif;
}
.neo {
border: 3px solid #000;
box-shadow: 7px 7px 0 #000;
}
.neo-sm {
border: 2px solid #000;
box-shadow: 4px 4px 0 #000;
}
.neo-btn {
border: 3px solid #000;
box-shadow: 5px 5px 0 #000;
transition: 0.15s ease;
}
.neo-btn:hover {
transform: translate(3px, 3px);
box-shadow: 2px 2px 0 #000;
}
</style>
</head>
<body class="bg-[#f7f1df] text-black">
<div class="min-h-screen overflow-hidden">
<nav class="mx-auto mt-5 flex w-[92%] max-w-6xl items-center justify-between rounded-2xl bg-white px-5 py-4 neo">
<div class="flex items-center gap-3">
<div class="grid h-11 w-11 place-items-center rounded-xl bg-[#ffcc00] neo-sm">
<span class="text-xl font-black">Z</span>
</div>
<h1 class="text-xl font-black tracking-tight">Zyphra</h1>
</div>
<div class="hidden items-center gap-6 font-bold md:flex">
<a href="#" class="hover:underline">Home</a>
<a href="#" class="hover:underline">Produk</a>
<a href="#" class="hover:underline">Template</a>
<a href="#" class="hover:underline">Kontak</a>
</div>
<a href="#" class="rounded-xl bg-[#00d1ff] px-5 py-2 font-black neo-btn">
Login
</a>
</nav>
<main class="mx-auto grid w-[92%] max-w-6xl gap-8 py-10 lg:grid-cols-[1.1fr_0.9fr] lg:items-center">
<section>
<div class="mb-5 inline-flex rounded-full bg-[#ff70a6] px-5 py-2 text-sm font-black neo-sm">
Website Digital Produk
</div>
<h2 class="max-w-3xl text-5xl font-black leading-[1.03] tracking-tight md:text-7xl">
Jual Script, Bot, dan Website dengan UI yang Nendang.
</h2>
<p class="mt-6 max-w-2xl text-lg font-semibold leading-relaxed text-neutral-800">
Tampilan neobrutalism yang tebal, unik, modern, dan mudah menarik perhatian user.
Cocok untuk landing page, toko produk digital, dashboard admin, dan website portfolio.
</p>
<div class="mt-8 flex flex-col gap-4 sm:flex-row">
<a href="#" class="rounded-2xl bg-[#ffcc00] px-7 py-4 text-center text-lg font-black neo-btn">
Mulai Sekarang
</a>
<a href="#" class="rounded-2xl bg-white px-7 py-4 text-center text-lg font-black neo-btn">
Lihat Produk
</a>
</div>
<div class="mt-10 grid gap-4 sm:grid-cols-3">
<div class="rounded-2xl bg-white p-5 neo-sm">
<p class="text-3xl font-black">120+</p>
<p class="font-bold text-neutral-700">Produk Digital</p>
</div>
<div class="rounded-2xl bg-[#c7f464] p-5 neo-sm">
<p class="text-3xl font-black">98%</p>
<p class="font-bold text-neutral-700">User Puas</p>
</div>
<div class="rounded-2xl bg-[#00d1ff] p-5 neo-sm">
<p class="text-3xl font-black">24/7</p>
<p class="font-bold text-neutral-700">Auto Access</p>
</div>
</div>
</section>
<section class="relative">
<div class="absolute -right-10 -top-10 h-32 w-32 rounded-full bg-[#ff70a6] neo-sm"></div>
<div class="absolute -bottom-8 -left-8 h-24 w-24 rotate-12 bg-[#ffcc00] neo-sm"></div>
<div class="relative rounded-[2rem] bg-white p-5 neo">
<div class="rounded-[1.5rem] bg-[#111] p-4 text-white neo-sm">
<div class="mb-4 flex items-center justify-between">
<div>
<p class="text-sm font-black text-[#ffcc00]">Dashboard</p>
<h3 class="text-2xl font-black">Admin Panel</h3>
</div>
<div class="rounded-xl bg-[#ff70a6] px-4 py-2 text-sm font-black text-black neo-sm">
Live
</div>
</div>
<div class="grid gap-4">
<div class="rounded-2xl bg-[#00d1ff] p-4 text-black neo-sm">
<p class="text-sm font-black">Total Order</p>
<p class="text-4xl font-black">1,280</p>
</div>
<div class="grid grid-cols-2 gap-4">
<div class="rounded-2xl bg-[#ffcc00] p-4 text-black neo-sm">
<p class="font-black">Produk</p>
<p class="text-3xl font-black">56</p>
</div>
<div class="rounded-2xl bg-[#c7f464] p-4 text-black neo-sm">
<p class="font-black">User</p>
<p class="text-3xl font-black">892</p>
</div>
</div>
<div class="rounded-2xl bg-white p-4 text-black neo-sm">
<div class="mb-3 flex items-center justify-between">
<p class="font-black">Produk Terlaris</p>
<span class="rounded-lg bg-[#ff70a6] px-3 py-1 text-xs font-black neo-sm">HOT</span>
</div>
<div class="space-y-3">
<div class="flex items-center justify-between rounded-xl bg-[#f7f1df] px-4 py-3 neo-sm">
<span class="font-black">Bot WhatsApp</span>
<span class="font-black">Rp50K</span>
</div>
<div class="flex items-center justify-between rounded-xl bg-[#f7f1df] px-4 py-3 neo-sm">
<span class="font-black">Website Store</span>
<span class="font-black">Rp75K</span>
</div>
<div class="flex items-center justify-between rounded-xl bg-[#f7f1df] px-4 py-3 neo-sm">
<span class="font-black">API Premium</span>
<span class="font-black">Rp30K</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<section class="mx-auto w-[92%] max-w-6xl pb-14">
<div class="mb-6 flex items-end justify-between gap-4">
<div>
<p class="mb-2 inline-block rounded-full bg-[#00d1ff] px-4 py-2 text-sm font-black neo-sm">
Produk Pilihan
</p>
<h2 class="text-4xl font-black">Template Produk</h2>
</div>
<a href="#" class="hidden rounded-xl bg-white px-5 py-3 font-black neo-btn sm:inline-block">
Semua Produk
</a>
</div>
<div class="grid gap-6 md:grid-cols-3">
<div class="rounded-3xl bg-white p-5 neo">
<div class="mb-4 grid h-44 place-items-center rounded-2xl bg-[#ffcc00] neo-sm">
<span class="text-5xl font-black">BOT</span>
</div>
<h3 class="text-2xl font-black">Bot WhatsApp</h3>
<p class="mt-2 font-semibold text-neutral-700">
Script bot modern dengan fitur otomatisasi, downloader, sticker, dan admin tools.
</p>
<div class="mt-5 flex items-center justify-between">
<span class="text-2xl font-black">Rp50K</span>
<button class="rounded-xl bg-[#ff70a6] px-4 py-2 font-black neo-btn">
Beli
</button>
</div>
</div>
<div class="rounded-3xl bg-[#c7f464] p-5 neo">
<div class="mb-4 grid h-44 place-items-center rounded-2xl bg-white neo-sm">
<span class="text-5xl font-black">WEB</span>
</div>
<h3 class="text-2xl font-black">Website Store</h3>
<p class="mt-2 font-semibold text-neutral-700">
Template toko digital untuk jual script, source code, bot, dan produk premium.
</p>
<div class="mt-5 flex items-center justify-between">
<span class="text-2xl font-black">Rp75K</span>
<button class="rounded-xl bg-[#00d1ff] px-4 py-2 font-black neo-btn">
Beli
</button>
</div>
</div>
<div class="rounded-3xl bg-[#00d1ff] p-5 neo">
<div class="mb-4 grid h-44 place-items-center rounded-2xl bg-white neo-sm">
<span class="text-5xl font-black">API</span>
</div>
<h3 class="text-2xl font-black">REST API</h3>
<p class="mt-2 font-semibold text-neutral-800">
Landing page API premium dengan dashboard, limit user, dan dokumentasi endpoint.
</p>
<div class="mt-5 flex items-center justify-between">
<span class="text-2xl font-black">Rp30K</span>
<button class="rounded-xl bg-[#ffcc00] px-4 py-2 font-black neo-btn">
Beli
</button>
</div>
</div>
</div>
</section>
</div>
</body>
</html>