Skip to content

Instantly share code, notes, and snippets.

@mhekel

mhekel/ai-generated-neo-brutalism-admin-dashboard.markdown

Created April 5, 2026 20:54
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mhekel/eadf4336d838e930d39c07ea40f7f405 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mhekel/eadf4336d838e930d39c07ea40f7f405 to your computer and use it in GitHub Desktop.
Download ZIP
(AI Generated) Neo-Brutalism Admin Dashboard
Raw
ai-generated-neo-brutalism-admin-dashboard.markdown
Raw
index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neo-Brutalism Admin Dashboard</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<!-- Phosphor Icons -->
<script src="https://unpkg.com/@phosphor-icons/web"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'nb-yellow': '#FFDE59',
'nb-pink': '#FF90E8',
'nb-blue': '#54CAFE',
'nb-green': '#7DFA8D',
'nb-purple': '#9E7AFF',
'nb-orange': '#FF6B6B',
'nb-gray': '#F3F4F6',
'nb-black': '#1F2937',
},
boxShadow: {
'nb': '4px 4px 0px 0px #000000',
'nb-sm': '2px 2px 0px 0px #000000',
'nb-lg': '8px 8px 0px 0px #000000',
'nb-hover': '2px 2px 0px 0px #000000',
'nb-active': '0px 0px 0px 0px #000000',
},
borderWidth: {
'3': '3px',
},
fontFamily: {
'sans': ['Inter', 'sans-serif'],
'mono': ['Fira Code', 'monospace'],
}
}
}
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=Fira+Code:wght@400;600&display=swap');
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
border-left: 3px solid black;
border-top: 3px solid black;
}
::-webkit-scrollbar-thumb {
background: #FF90E8;
border: 3px solid black;
}
::-webkit-scrollbar-thumb:hover {
background: #FFDE59;
}
body {
background-color: #F3F4F6;
color: #000;
}
.nb-card {
background-color: white;
border: 3px solid black;
box-shadow: 4px 4px 0px 0px #000000;
}
.nb-btn {
border: 3px solid black;
box-shadow: 4px 4px 0px 0px #000000;
transition: all 0.1s;
font-weight: 700;
text-transform: uppercase;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.nb-btn:hover {
transform: translate(2px, 2px);
box-shadow: 2px 2px 0px 0px #000000;
}
.nb-btn:active {
transform: translate(4px, 4px);
box-shadow: none;
}
.nb-input {
border: 3px solid black;
box-shadow: 4px 4px 0px 0px #000000;
transition: all 0.2s;
outline: none;
}
.nb-input:focus {
transform: translate(2px, 2px);
box-shadow: 2px 2px 0px 0px #000000;
background-color: #fff;
}
/* Custom Checkbox */
.nb-checkbox {
appearance: none;
width: 1.5rem;
height: 1.5rem;
border: 3px solid black;
background-color: white;
cursor: pointer;
position: relative;
box-shadow: 2px 2px 0px 0px #000000;
}
.nb-checkbox:checked {
background-color: #7DFA8D;
}
.nb-checkbox:checked::after {
content: '✓';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-weight: 900;
font-size: 1rem;
}
/* Custom Radio */
.nb-radio {
appearance: none;
width: 1.5rem;
height: 1.5rem;
border: 3px solid black;
border-radius: 50%;
background-color: white;
cursor: pointer;
position: relative;
box-shadow: 2px 2px 0px 0px #000000;
}
.nb-radio:checked {
background-color: #54CAFE;
}
.nb-radio:checked::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0.5rem;
height: 0.5rem;
background-color: black;
border-radius: 50%;
}
</style>
</head>
<body class="h-screen overflow-hidden flex text-base font-sans antialiased selection:bg-nb-pink selection:text-black">
<div id="app" class="w-full h-full flex">
<!-- Sidebar -->
<aside class="w-72 bg-nb-yellow border-r-3 border-black flex flex-col h-full overflow-y-auto z-20 flex-shrink-0 transition-all duration-300" :class="{'w-20': sidebarCollapsed}">
<!-- Logo -->
<div class="p-6 border-b-3 border-black bg-white flex justify-between items-center sticky top-0 z-10">
<h1 v-if="!sidebarCollapsed" class="text-2xl font-black uppercase tracking-tighter truncate">Neo<span class="text-nb-purple">Admin</span></h1>
<h1 v-else class="text-2xl font-black uppercase tracking-tighter text-center w-full">N<span class="text-nb-purple">A</span></h1>
<button @click="sidebarCollapsed = !sidebarCollapsed" class="lg:hidden">
<i class="ph ph-list text-xl"></i>
</button>
</div>
<!-- Navigation -->
<nav class="flex-1 p-4 space-y-6 overflow-y-auto">
<template v-for="(section, index) in menuSections" :key="index">
<div class="mb-2">
<h3 v-if="!sidebarCollapsed" class="font-black text-xs uppercase mb-3 px-2 tracking-widest opacity-70">{{ section.title }}</h3>
<div v-else class="h-px bg-black my-4 mx-2 opacity-20"></div>
<ul class="space-y-2">
<li v-for="item in section.items" :key="item.id">
<a href="#" @click.prevent="activeTab = item.id" :title="sidebarCollapsed ? item.name : ''" :class="['flex items-center gap-3 px-3 py-3 border-3 border-black font-bold text-sm transition-all group relative',
activeTab === item.id ? 'bg-nb-pink shadow-nb-sm translate-x-0.5 translate-y-0.5' : 'bg-white hover:bg-nb-blue hover:shadow-nb-sm hover:-translate-y-0.5 hover:-translate-x-0.5 shadow-none']">
<i :class="['ph text-xl', item.icon]"></i>
<span v-if="!sidebarCollapsed" class="truncate">{{ item.name }}</span>
<!-- Tooltip for collapsed state -->
<div v-if="sidebarCollapsed" class="absolute left-full ml-4 bg-black text-white text-xs px-2 py-1 whitespace-nowrap opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity z-50 border-2 border-white shadow-nb-sm">
{{ item.name }}
</div>
</a>
</li>
</ul>
</div>
</template>
</nav>
<!-- User Profile Footer -->
<div class="p-4 border-t-3 border-black bg-white sticky bottom-0">
<div class="flex items-center gap-3" :class="{'justify-center': sidebarCollapsed}">
<div class="w-10 h-10 bg-nb-blue border-3 border-black rounded-full flex items-center justify-center font-bold flex-shrink-0 overflow-hidden">
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Felix" alt="Avatar" class="w-full h-full">
</div>
<div v-if="!sidebarCollapsed" class="overflow-hidden">
<div class="font-bold text-sm truncate">Jane Doe</div>
<div class="text-xs text-gray-600 truncate">Super Admin</div>
</div>
<button v-if="!sidebarCollapsed" class="ml-auto p-1 hover:bg-gray-100 rounded border-2 border-transparent hover:border-black transition-all">
<i class="ph ph-sign-out text-xl"></i>
</button>
</div>
</div>
</aside>
<!-- Main Content -->
<main class="flex-1 h-full overflow-y-auto bg-nb-gray relative flex flex-col">
<!-- Header -->
<header class="bg-white border-b-3 border-black p-6 flex justify-between items-center sticky top-0 z-10 shadow-nb-sm">
<div class="flex items-center gap-4">
<button @click="sidebarCollapsed = !sidebarCollapsed" class="hidden lg:block p-2 border-3 border-black shadow-nb-sm hover:shadow-nb-hover hover:translate-x-[2px] hover:translate-y-[2px] active:shadow-none active:translate-x-[4px] active:translate-y-[4px] transition-all bg-nb-green">
<i :class="sidebarCollapsed ? 'ph ph-arrow-right' : 'ph ph-arrow-left'" class="text-xl font-bold"></i>
</button>
<div>
<h2 class="text-3xl font-black uppercase tracking-tight">{{ currentTabName }}</h2>
</div>
</div>
<div class="flex gap-4 items-center">
<div class="hidden md:flex items-center gap-2 bg-white border-3 border-black px-3 py-2 shadow-nb-sm">
<i class="ph ph-magnifying-glass text-xl"></i>
<input type="text" placeholder="Search..." class="outline-none bg-transparent font-bold text-sm w-48 placeholder-gray-400">
<span class="text-xs font-mono bg-gray-200 px-1 border border-black">⌘K</span>
</div>
<button class="nb-btn bg-white w-10 h-10 !p-0 rounded-full !gap-0">
<i class="ph ph-bell text-xl"></i>
<span class="absolute top-0 right-0 w-3 h-3 bg-nb-orange border-2 border-black rounded-full"></span>
</button>
</div>
</header>
<!-- Content Area -->
<div class="p-8 pb-20 max-w-7xl mx-auto w-full">
<!-- Section 1: Foundation (Typography, Buttons, Avatars) -->
<section v-if="activeTab === 'foundation'" class="space-y-12 animate-fade-in">
<!-- Typography -->
<div class="space-y-6">
<h3 class="text-2xl font-black border-b-3 border-black pb-2 inline-block bg-nb-yellow px-4 shadow-nb-sm">01. Typography</h3>
<div class="nb-card p-8 space-y-6">
<div class="space-y-2">
<h1 class="text-6xl font-black">Heading H1</h1>
<h2 class="text-5xl font-black">Heading H2</h2>
<h3 class="text-4xl font-bold">Heading H3</h3>
<h4 class="text-3xl font-bold">Heading H4</h4>
<h5 class="text-2xl font-bold">Heading H5</h5>
<h6 class="text-xl font-bold">Heading H6</h6>
</div>
<hr class="border-2 border-black border-dashed">
<div class="grid md:grid-cols-2 gap-8">
<div>
<p class="mb-4 font-bold">Body Bold</p>
<p class="mb-4">Regular paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula.</p>
<p class="text-sm">Small text. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
</div>
<div>
<blockquote class="border-l-4 border-nb-purple pl-4 py-2 bg-gray-50 italic font-medium text-lg">
"Design is not just what it looks like and feels like. Design is how it works."
</blockquote>
<div class="mt-4 bg-black text-nb-green p-4 font-mono text-sm border-3 border-gray-500 shadow-nb-sm">
$ npm install neo-brutalism
<br>> Installing dependencies...
<br>> Done in 1.2s
</div>
</div>
</div>
</div>
</div>
<!-- Buttons -->
<div class="space-y-6">
<h3 class="text-2xl font-black border-b-3 border-black pb-2 inline-block bg-nb-pink px-4 shadow-nb-sm">02. Buttons</h3>
<div class="nb-card p-8">
<div class="flex flex-wrap gap-4 mb-8">
<button class="nb-btn bg-nb-yellow px-6 py-3 text-lg">Primary Button</button>
<button class="nb-btn bg-nb-blue px-6 py-3 text-lg">Secondary</button>
<button class="nb-btn bg-nb-green px-6 py-3 text-lg">Success</button>
<button class="nb-btn bg-nb-orange px-6 py-3 text-lg">Danger</button>
<button class="nb-btn bg-white px-6 py-3 text-lg">Ghost</button>
<button class="nb-btn bg-black text-white px-6 py-3 text-lg">Dark</button>
</div>
<div class="flex flex-wrap gap-4 mb-8 items-center">
<button class="nb-btn bg-nb-purple px-4 py-2 text-sm">Small</button>
<button class="nb-btn bg-nb-purple px-6 py-3">Medium</button>
<button class="nb-btn bg-nb-purple px-8 py-4 text-xl">Large</button>
</div>
<div class="flex flex-wrap gap-4 items-center">
<button class="nb-btn bg-white w-12 h-12 !p-0 rounded-full"><i class="ph ph-heart text-2xl"></i></button>
<button class="nb-btn bg-nb-blue px-4 py-2"><i class="ph ph-download-simple text-xl"></i> Download</button>
<button class="nb-btn bg-nb-yellow px-4 py-2">Next <i class="ph ph-arrow-right text-xl"></i></button>
<button class="nb-btn bg-gray-200 px-6 py-3 cursor-not-allowed opacity-50" disabled>Disabled</button>
<button class="nb-btn bg-white px-6 py-3"><i class="ph ph-spinner animate-spin text-xl"></i> Loading</button>
</div>
</div>
</div>
<!-- Avatars & Badges -->
<div class="space-y-6">
<h3 class="text-2xl font-black border-b-3 border-black pb-2 inline-block bg-nb-blue px-4 shadow-nb-sm">03. Avatars & Badges</h3>
<div class="nb-card p-8 grid md:grid-cols-2 gap-8">
<div>
<h4 class="font-bold mb-4 text-lg">Avatars</h4>
<div class="flex items-end gap-4 mb-6">
<div class="w-16 h-16 bg-gray-200 border-3 border-black rounded-full overflow-hidden shadow-nb-sm">
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Felix" alt="Avatar">
</div>
<div class="w-12 h-12 bg-nb-pink border-3 border-black rounded-full overflow-hidden shadow-nb-sm">
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Aneka" alt="Avatar">
</div>
<div class="w-10 h-10 bg-nb-green border-3 border-black rounded-full overflow-hidden shadow-nb-sm">
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Bob" alt="Avatar">
</div>
</div>
<div class="flex items-center gap-4">
<div class="w-14 h-14 bg-white border-3 border-black shadow-nb-sm flex items-center justify-center font-black text-xl">JD</div>
<div class="relative">
<div class="w-14 h-14 bg-gray-200 border-3 border-black rounded-full overflow-hidden">
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Jack" alt="Avatar">
</div>
<div class="absolute bottom-0 right-0 w-4 h-4 bg-nb-green border-2 border-black rounded-full"></div>
</div>
</div>
</div>
<div>
<h4 class="font-bold mb-4 text-lg">Badges & Tags</h4>
<div class="flex flex-wrap gap-3 mb-6">
<span class="bg-nb-yellow border-2 border-black px-3 py-1 font-bold text-xs uppercase shadow-nb-sm">New</span>
<span class="bg-nb-pink border-2 border-black px-3 py-1 font-bold text-xs uppercase shadow-nb-sm">Featured</span>
<span class="bg-nb-blue border-2 border-black px-3 py-1 font-bold text-xs uppercase shadow-nb-sm">Beta</span>
<span class="bg-nb-green border-2 border-black px-3 py-1 font-bold text-xs uppercase shadow-nb-sm">Success</span>
<span class="bg-nb-orange border-2 border-black px-3 py-1 font-bold text-xs uppercase shadow-nb-sm">Error</span>
</div>
<div class="flex flex-wrap gap-3">
<span class="bg-white border-2 border-black px-3 py-1 font-bold text-sm rounded-full">#Design</span>
<span class="bg-white border-2 border-black px-3 py-1 font-bold text-sm rounded-full">#Development</span>
<span class="bg-black text-white border-2 border-black px-3 py-1 font-bold text-sm rounded-full">#Brutalism</span>
</div>
</div>
</div>
</div>
</section>
<!-- Section 2: Forms -->
<section v-else-if="activeTab === 'forms'" class="space-y-12 animate-fade-in">
<div class="space-y-6">
<h3 class="text-2xl font-black border-b-3 border-black pb-2 inline-block bg-nb-green px-4 shadow-nb-sm">04. Inputs & Controls</h3>
<div class="grid lg:grid-cols-2 gap-8">
<!-- Text Inputs -->
<div class="nb-card p-8 space-y-6">
<h4 class="font-bold text-xl mb-4">Text Inputs</h4>
<div>
<label class="block font-bold mb-2 text-sm uppercase">Username</label>
<input type="text" class="nb-input w-full px-4 py-3 font-bold bg-gray-50" placeholder="Enter username...">
</div>
<div>
<label class="block font-bold mb-2 text-sm uppercase">Email Address</label>
<div class="relative">
<input type="email" class="nb-input w-full px-4 py-3 font-bold bg-gray-50 pl-12" placeholder="john@example.com">
<i class="ph ph-envelope absolute left-4 top-1/2 -translate-y-1/2 text-xl"></i>
</div>
</div>
<div class="flex gap-4">
<div class="flex-1">
<label class="block font-bold mb-2 text-sm uppercase">City</label>
<input type="text" class="nb-input w-full px-4 py-3 font-bold bg-gray-50" placeholder="New York">
</div>
<div class="w-1/3">
<label class="block font-bold mb-2 text-sm uppercase">Zip</label>
<input type="text" class="nb-input w-full px-4 py-3 font-bold bg-gray-50" placeholder="10001">
</div>
</div>
<div>
<label class="block font-bold mb-2 text-sm uppercase">Message</label>
<textarea class="nb-input w-full px-4 py-3 font-bold bg-gray-50 h-32 resize-none" placeholder="Type your message here..."></textarea>
</div>
</div>
<!-- Selection Controls -->
<div class="space-y-8">
<div class="nb-card p-8 space-y-6">
<h4 class="font-bold text-xl mb-4">Selection</h4>
<!-- Checkboxes -->
<div>
<p class="font-bold mb-3 text-sm uppercase">Interests</p>
<div class="space-y-3">
<label class="flex items-center gap-3 cursor-pointer group">
<input type="checkbox" class="nb-checkbox">
<span class="font-bold group-hover:underline">Design & UI</span>
</label>
<label class="flex items-center gap-3 cursor-pointer group">
<input type="checkbox" class="nb-checkbox" checked>
<span class="font-bold group-hover:underline">Frontend Development</span>
</label>
<label class="flex items-center gap-3 cursor-pointer group">
<input type="checkbox" class="nb-checkbox">
<span class="font-bold group-hover:underline">Backend Architecture</span>
</label>
</div>
</div>
<hr class="border-black border-2 border-dashed">
<!-- Radios -->
<div>
<p class="font-bold mb-3 text-sm uppercase">Notification Preference</p>
<div class="flex gap-6">
<label class="flex items-center gap-3 cursor-pointer group">
<input type="radio" name="notif" class="nb-radio" checked>
<span class="font-bold group-hover:underline">Email</span>
</label>
<label class="flex items-center gap-3 cursor-pointer group">
<input type="radio" name="notif" class="nb-radio">
<span class="font-bold group-hover:underline">SMS</span>
</label>
<label class="flex items-center gap-3 cursor-pointer group">
<input type="radio" name="notif" class="nb-radio">
<span class="font-bold group-hover:underline">Push</span>
</label>
</div>
</div>
</div>
<!-- Toggle & Slider -->
<div class="nb-card p-8 space-y-6">
<div class="flex items-center justify-between">
<span class="font-bold">Dark Mode</span>
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" value="" class="sr-only peer">
<div class="w-14 h-8 bg-gray-200 peer-focus:outline-none border-3 border-black rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-black after:border-2 after:border-black"></div>
</label>
</div>
<div>
<label class="block font-bold mb-2 text-sm uppercase">Volume</label>
<input type="range" min="0" max="100" value="70" class="w-full h-4 bg-gray-200 rounded-lg appearance-none cursor-pointer border-3 border-black accent-nb-pink">
</div>
</div>
</div>
</div>
<!-- File Upload & Color Picker -->
<div class="grid lg:grid-cols-2 gap-8">
<div class="nb-card p-8">
<h4 class="font-bold text-xl mb-4">File Upload</h4>
<div class="border-3 border-black border-dashed bg-gray-50 p-8 text-center hover:bg-nb-yellow/20 transition-colors cursor-pointer relative">
<input type="file" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer">
<i class="ph ph-cloud-arrow-up text-4xl mb-2"></i>
<p class="font-bold">Drag & Drop or Click to Upload</p>
<p class="text-sm text-gray-500 mt-2">SVG, PNG, JPG or GIF (MAX. 800x400px)</p>
</div>
</div>
<div class="nb-card p-8">
<h4 class="font-bold text-xl mb-4">Color Picker</h4>
<div class="flex items-center gap-4">
<input type="color" class="w-16 h-16 p-1 bg-white border-3 border-black cursor-pointer" value="#FF90E8">
<div>
<p class="font-bold text-lg">#FF90E8</p>
<p class="text-sm text-gray-500">Selected Color</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Section 3: Navigation & Containers -->
<section v-else-if="activeTab === 'navigation'" class="space-y-12 animate-fade-in">
<!-- Navbar & Breadcrumb -->
<div class="space-y-6">
<h3 class="text-2xl font-black border-b-3 border-black pb-2 inline-block bg-nb-orange px-4 shadow-nb-sm">05. Navigation</h3>
<!-- Breadcrumb -->
<div class="nb-card p-6">
<nav class="flex" aria-label="Breadcrumb">
<ol class="inline-flex items-center space-x-1 md:space-x-3">
<li class="inline-flex items-center">
<a href="#" class="inline-flex items-center text-sm font-bold hover:text-nb-purple">
<i class="ph ph-house mr-2 text-lg"></i>
Home
</a>
</li>
<li>
<div class="flex items-center">
<i class="ph ph-caret-right text-gray-400 mx-1"></i>
<a href="#" class="ml-1 text-sm font-bold hover:text-nb-purple md:ml-2">Projects</a>
</div>
</li>
<li aria-current="page">
<div class="flex items-center">
<i class="ph ph-caret-right text-gray-400 mx-1"></i>
<span class="ml-1 text-sm font-bold text-gray-500 md:ml-2">Neo-Brutalism</span>
</div>
</li>
</ol>
</nav>
</div>
<!-- Navbar Example -->
<div class="nb-card p-0 overflow-hidden">
<nav class="bg-nb-black text-white p-4 flex justify-between items-center border-b-3 border-black">
<div class="font-black text-xl tracking-tighter">LOGO</div>
<div class="hidden md:flex gap-6 font-bold text-sm">
<a href="#" class="hover:text-nb-yellow">Home</a>
<a href="#" class="hover:text-nb-yellow">About</a>
<a href="#" class="hover:text-nb-yellow">Services</a>
<a href="#" class="hover:text-nb-yellow">Contact</a>
</div>
<button class="bg-nb-yellow text-black border-2 border-white px-4 py-1 font-bold text-sm hover:bg-white transition-colors">Login</button>
</nav>
</div>
</div>
<!-- Tabs & Pagination -->
<div class="grid lg:grid-cols-2 gap-8">
<div class="nb-card p-8 space-y-6">
<h4 class="font-bold text-xl mb-4">Tabs</h4>
<div class="border-b-3 border-black">
<ul class="flex flex-wrap -mb-[3px]">
<li class="mr-2">
<a href="#" class="inline-block p-4 border-3 border-black border-b-0 bg-nb-pink rounded-t-lg active font-bold">Profile</a>
</li>
<li class="mr-2">
<a href="#" class="inline-block p-4 border-3 border-transparent hover:border-black hover:bg-gray-100 rounded-t-lg font-bold">Dashboard</a>
</li>
<li class="mr-2">
<a href="#" class="inline-block p-4 border-3 border-transparent hover:border-black hover:bg-gray-100 rounded-t-lg font-bold">Settings</a>
</li>
</ul>
</div>
<div class="p-4 bg-white border-3 border-black border-t-0 -mt-[3px]">
<p class="font-bold">Tab Content</p>
<p class="text-sm mt-2">This is the content for the active tab. It has a seamless connection with the tab header.</p>
</div>
</div>
<div class="nb-card p-8 space-y-6 flex flex-col justify-center">
<h4 class="font-bold text-xl mb-4">Pagination</h4>
<nav aria-label="Page navigation">
<ul class="inline-flex -space-x-px">
<li>
<a href="#" class="px-3 py-2 ml-0 leading-tight text-black bg-white border-3 border-black hover:bg-gray-100 font-bold">Prev</a>
</li>
<li>
<a href="#" class="px-3 py-2 leading-tight text-black bg-white border-3 border-r-0 border-black hover:bg-gray-100 font-bold">1</a>
</li>
<li>
<a href="#" class="px-3 py-2 leading-tight text-black bg-nb-yellow border-3 border-r-0 border-black font-bold">2</a>
</li>
<li>
<a href="#" class="px-3 py-2 leading-tight text-black bg-white border-3 border-r-0 border-black hover:bg-gray-100 font-bold">3</a>
</li>
<li>
<a href="#" class="px-3 py-2 leading-tight text-black bg-white border-3 border-black hover:bg-gray-100 font-bold">Next</a>
</li>
</ul>
</nav>
</div>
</div>
<!-- Accordion & Dropdown -->
<div class="grid lg:grid-cols-2 gap-8">
<div class="nb-card p-8">
<h4 class="font-bold text-xl mb-4">Accordion</h4>
<div class="space-y-2">
<div class="border-3 border-black">
<button class="flex items-center justify-between w-full p-4 font-bold text-left bg-gray-50 hover:bg-gray-100">
<span>What is Neo-Brutalism?</span>
<i class="ph ph-caret-down"></i>
</button>
<div class="p-4 border-t-3 border-black bg-white">
<p class="text-sm">It's a design trend characterized by raw, unpolished aesthetics, bold typography, and high-contrast colors.</p>
</div>
</div>
<div class="border-3 border-black">
<button class="flex items-center justify-between w-full p-4 font-bold text-left bg-white hover:bg-gray-100">
<span>Is it accessible?</span>
<i class="ph ph-caret-right"></i>
</button>
</div>
</div>
</div>
<div class="nb-card p-8">
<h4 class="font-bold text-xl mb-4">Dropdown</h4>
<div class="relative inline-block text-left">
<button class="nb-btn bg-white px-4 py-2 flex items-center gap-2">
Options <i class="ph ph-caret-down"></i>
</button>
<!-- Dropdown menu -->
<div class="absolute right-0 z-10 mt-2 w-56 origin-top-right bg-white border-3 border-black shadow-nb-lg">
<div class="py-1">
<a href="#" class="block px-4 py-2 text-sm font-bold text-black hover:bg-nb-yellow border-b-2 border-black">Account settings</a>
<a href="#" class="block px-4 py-2 text-sm font-bold text-black hover:bg-nb-yellow border-b-2 border-black">Support</a>
<a href="#" class="block px-4 py-2 text-sm font-bold text-black hover:bg-nb-yellow">License</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Section 4: Cards & Layout -->
<section v-else-if="activeTab === 'cards'" class="space-y-12 animate-fade-in">
<h3 class="text-2xl font-black border-b-3 border-black pb-2 inline-block bg-nb-purple px-4 shadow-nb-sm">06. Cards & Layout</h3>
<!-- Grid System -->
<div class="grid md:grid-cols-3 gap-8">
<!-- Image Card -->
<div class="nb-card overflow-hidden group">
<div class="h-48 bg-gray-200 border-b-3 border-black relative overflow-hidden">
<img src="https://picsum.photos/seed/neo/800/400" alt="Card Image" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
<div class="absolute top-4 right-4 bg-nb-yellow border-2 border-black px-2 py-1 font-bold text-xs shadow-nb-sm">NEW</div>
</div>
<div class="p-6">
<h4 class="font-black text-xl mb-2">Project Alpha</h4>
<p class="text-sm mb-4">A brutalist approach to modern web design. Bold, raw, and unapologetic.</p>
<button class="nb-btn bg-nb-blue w-full py-2 text-sm">View Details</button>
</div>
</div>
<!-- Stats Card -->
<div class="nb-card p-6 flex flex-col justify-between bg-nb-green">
<div class="flex justify-between items-start mb-4">
<div>
<p class="font-bold text-sm uppercase opacity-70">Total Revenue</p>
<h4 class="font-black text-4xl">$84,200</h4>
</div>
<div class="w-10 h-10 bg-white border-3 border-black rounded-full flex items-center justify-center">
<i class="ph ph-currency-dollar text-xl"></i>
</div>
</div>
<div class="flex items-center gap-2 font-bold text-sm">
<span class="bg-white border-2 border-black px-2 py-0.5 rounded-full flex items-center gap-1">
<i class="ph ph-trend-up text-nb-green"></i> +12%
</span>
<span>vs last month</span>
</div>
</div>
<!-- Interactive Card -->
<div class="nb-card p-6 hover:bg-nb-pink transition-colors cursor-pointer group">
<div class="w-12 h-12 bg-nb-yellow border-3 border-black mb-4 flex items-center justify-center shadow-nb-sm group-hover:translate-x-1 group-hover:translate-y-1 transition-transform">
<i class="ph ph-lightning text-2xl"></i>
</div>
<h4 class="font-black text-xl mb-2">Quick Action</h4>
<p class="text-sm font-medium">Click here to trigger a quick action or navigate to a specific module.</p>
</div>
</div>
<!-- Horizontal Card -->
<div class="nb-card flex flex-col md:flex-row overflow-hidden">
<div class="md:w-1/3 bg-gray-200 border-b-3 md:border-b-0 md:border-r-3 border-black relative">
<img src="https://picsum.photos/seed/brutal/800/600" alt="Cover" class="w-full h-full object-cover absolute inset-0">
</div>
<div class="p-8 md:w-2/3 flex flex-col justify-center">
<div class="flex items-center gap-2 mb-4">
<span class="bg-nb-black text-white px-3 py-1 font-bold text-xs uppercase">Featured</span>
<span class="text-sm font-bold text-gray-500">Nov 19, 2025</span>
</div>
<h3 class="font-black text-3xl mb-4">The Art of Neo-Brutalism</h3>
<p class="font-medium mb-6">Neo-Brutalism merges the raw aesthetic of brutalism with modern animation, typography, and illustration. It's not just a style; it's a statement against the polished, corporate web.</p>
<div class="flex gap-4">
<button class="nb-btn bg-nb-yellow px-6 py-3">Read Article</button>
<button class="nb-btn bg-white px-6 py-3">Share</button>
</div>
</div>
</div>
</section>
<!-- Section 5: Data Tables -->
<section v-else-if="activeTab === 'tables'" class="space-y-12 animate-fade-in">
<h3 class="text-2xl font-black border-b-3 border-black pb-2 inline-block bg-nb-blue px-4 shadow-nb-sm">07. Data Tables</h3>
<div class="nb-card overflow-hidden">
<div class="p-6 border-b-3 border-black flex justify-between items-center bg-gray-50">
<h4 class="font-black text-xl">Recent Transactions</h4>
<div class="flex gap-2">
<button class="nb-btn bg-white px-3 py-1 text-sm"><i class="ph ph-funnel"></i> Filter</button>
<button class="nb-btn bg-nb-green px-3 py-1 text-sm"><i class="ph ph-download-simple"></i> Export</button>
</div>
</div>
<div class="overflow-x-auto">
<table class="w-full text-left border-collapse">
<thead>
<tr class="bg-nb-yellow border-b-3 border-black">
<th class="p-4 font-black uppercase text-sm border-r-3 border-black">ID</th>
<th class="p-4 font-black uppercase text-sm border-r-3 border-black">User</th>
<th class="p-4 font-black uppercase text-sm border-r-3 border-black">Status</th>
<th class="p-4 font-black uppercase text-sm border-r-3 border-black">Amount</th>
<th class="p-4 font-black uppercase text-sm">Actions</th>
</tr>
</thead>
<tbody class="font-bold text-sm">
<tr class="border-b-3 border-black hover:bg-gray-50">
<td class="p-4 border-r-3 border-black font-mono">#TRX-9821</td>
<td class="p-4 border-r-3 border-black flex items-center gap-3">
<div class="w-8 h-8 bg-gray-200 rounded-full border-2 border-black overflow-hidden">
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=1" alt="Avatar">
</div>
Alice Smith
</td>
<td class="p-4 border-r-3 border-black">
<span class="bg-nb-green border-2 border-black px-2 py-1 text-xs uppercase shadow-nb-sm">Completed</span>
</td>
<td class="p-4 border-r-3 border-black">$1,200.00</td>
<td class="p-4">
<button class="hover:text-nb-blue mr-2"><i class="ph ph-pencil-simple text-xl"></i></button>
<button class="hover:text-nb-orange"><i class="ph ph-trash text-xl"></i></button>
</td>
</tr>
<tr class="border-b-3 border-black hover:bg-gray-50">
<td class="p-4 border-r-3 border-black font-mono">#TRX-9822</td>
<td class="p-4 border-r-3 border-black flex items-center gap-3">
<div class="w-8 h-8 bg-gray-200 rounded-full border-2 border-black overflow-hidden">
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=2" alt="Avatar">
</div>
Bob Jones
</td>
<td class="p-4 border-r-3 border-black">
<span class="bg-nb-yellow border-2 border-black px-2 py-1 text-xs uppercase shadow-nb-sm">Pending</span>
</td>
<td class="p-4 border-r-3 border-black">$850.00</td>
<td class="p-4">
<button class="hover:text-nb-blue mr-2"><i class="ph ph-pencil-simple text-xl"></i></button>
<button class="hover:text-nb-orange"><i class="ph ph-trash text-xl"></i></button>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="p-4 border-r-3 border-black font-mono">#TRX-9823</td>
<td class="p-4 border-r-3 border-black flex items-center gap-3">
<div class="w-8 h-8 bg-gray-200 rounded-full border-2 border-black overflow-hidden">
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=3" alt="Avatar">
</div>
Charlie Day
</td>
<td class="p-4 border-r-3 border-black">
<span class="bg-nb-orange border-2 border-black px-2 py-1 text-xs uppercase shadow-nb-sm">Failed</span>
</td>
<td class="p-4 border-r-3 border-black">$2,300.00</td>
<td class="p-4">
<button class="hover:text-nb-blue mr-2"><i class="ph ph-pencil-simple text-xl"></i></button>
<button class="hover:text-nb-orange"><i class="ph ph-trash text-xl"></i></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Section 6: Feedback & Overlays -->
<section v-else-if="activeTab === 'feedback'" class="space-y-12 animate-fade-in">
<h3 class="text-2xl font-black border-b-3 border-black pb-2 inline-block bg-nb-pink px-4 shadow-nb-sm">08. Feedback & Overlays</h3>
<!-- Alerts -->
<div class="space-y-4">
<div class="bg-nb-green border-3 border-black p-4 shadow-nb-sm flex items-start gap-4">
<i class="ph ph-check-circle text-2xl"></i>
<div>
<h4 class="font-black uppercase">Success!</h4>
<p class="font-medium text-sm">Your changes have been saved successfully.</p>
</div>
<button class="ml-auto"><i class="ph ph-x text-xl"></i></button>
</div>
<div class="bg-nb-yellow border-3 border-black p-4 shadow-nb-sm flex items-start gap-4">
<i class="ph ph-warning text-2xl"></i>
<div>
<h4 class="font-black uppercase">Warning</h4>
<p class="font-medium text-sm">Your account subscription is about to expire.</p>
</div>
<button class="ml-auto"><i class="ph ph-x text-xl"></i></button>
</div>
<div class="bg-nb-orange border-3 border-black p-4 shadow-nb-sm flex items-start gap-4">
<i class="ph ph-warning-octagon text-2xl"></i>
<div>
<h4 class="font-black uppercase">Error</h4>
<p class="font-medium text-sm">Something went wrong. Please try again later.</p>
</div>
<button class="ml-auto"><i class="ph ph-x text-xl"></i></button>
</div>
</div>
<!-- Progress Bars -->
<div class="nb-card p-8 space-y-8">
<h4 class="font-bold text-xl">Progress Bars</h4>
<div>
<div class="flex justify-between mb-2 font-bold text-sm">
<span>Loading Assets</span>
<span>75%</span>
</div>
<div class="w-full bg-gray-200 border-3 border-black h-6 rounded-full overflow-hidden">
<div class="bg-nb-blue h-full border-r-3 border-black" style="width: 75%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-2 font-bold text-sm">
<span>Uploading</span>
<span>40%</span>
</div>
<div class="w-full bg-gray-200 border-3 border-black h-4 rounded-full overflow-hidden">
<div class="bg-nb-pink h-full border-r-3 border-black" style="width: 40%"></div>
</div>
</div>
</div>
<!-- Modals & Tooltips -->
<div class="grid md:grid-cols-2 gap-8">
<div class="nb-card p-8 flex flex-col items-center justify-center gap-4">
<h4 class="font-bold text-xl">Modal Dialog</h4>
<button class="nb-btn bg-nb-purple px-6 py-3 text-white">Open Modal</button>
<p class="text-xs text-gray-500 text-center mt-2">(Visual representation only)</p>
<!-- Modal Preview (Static) -->
<div class="relative mt-4 w-full max-w-xs">
<div class="bg-white border-3 border-black shadow-nb-lg p-6 relative z-10">
<h3 class="font-black text-xl mb-2">Confirm Action</h3>
<p class="text-sm mb-4">Are you sure you want to delete this item? This action cannot be undone.</p>
<div class="flex justify-end gap-2">
<button class="nb-btn bg-gray-200 px-3 py-1 text-sm">Cancel</button>
<button class="nb-btn bg-nb-orange px-3 py-1 text-sm">Delete</button>
</div>
</div>
<div class="absolute inset-0 bg-black/20 -z-0 translate-x-2 translate-y-2"></div>
</div>
</div>
<div class="nb-card p-8 flex flex-col items-center justify-center gap-8">
<h4 class="font-bold text-xl">Tooltips</h4>
<div class="relative group">
<button class="nb-btn bg-white px-4 py-2">Hover Me</button>
<div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-max bg-black text-white text-xs font-bold px-3 py-2 border-2 border-white shadow-nb-sm opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
This is a tooltip!
<div class="absolute top-full left-1/2 -translate-x-1/2 border-8 border-transparent border-t-black"></div>
</div>
</div>
</div>
</div>
</section>
<!-- Section 7: Advanced Components (Kanban, Charts, Chat, Files) -->
<section v-else-if="activeTab === 'kanban'" class="space-y-12 animate-fade-in">
<h3 class="text-2xl font-black border-b-3 border-black pb-2 inline-block bg-nb-yellow px-4 shadow-nb-sm">09. Kanban Board</h3>
<div class="flex overflow-x-auto gap-6 pb-4">
<!-- Column 1: To Do -->
<div class="w-80 flex-shrink-0 flex flex-col gap-4">
<div class="bg-nb-pink border-3 border-black p-3 font-black uppercase flex justify-between items-center shadow-nb-sm">
<span>To Do</span>
<span class="bg-white border-2 border-black px-2 text-xs rounded-full">3</span>
</div>
<!-- Task Card -->
<div class="bg-white border-3 border-black p-4 shadow-nb-sm hover:shadow-nb-hover hover:-translate-y-1 transition-all cursor-grab active:cursor-grabbing">
<div class="flex justify-between items-start mb-2">
<span class="bg-nb-blue border-2 border-black px-2 py-0.5 text-xs font-bold uppercase">Design</span>
<button><i class="ph ph-dots-three text-xl"></i></button>
</div>
<h4 class="font-bold mb-2">Create wireframes for new landing page</h4>
<div class="flex justify-between items-center mt-4">
<div class="flex -space-x-2">
<div class="w-8 h-8 bg-gray-200 rounded-full border-2 border-black overflow-hidden">
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Felix" alt="Avatar">
</div>
</div>
<div class="flex items-center gap-1 text-xs font-bold text-gray-500">
<i class="ph ph-paperclip"></i> 2
<i class="ph ph-chat-circle ml-2"></i> 4
</div>
</div>
</div>
<!-- Task Card -->
<div class="bg-white border-3 border-black p-4 shadow-nb-sm hover:shadow-nb-hover hover:-translate-y-1 transition-all cursor-grab active:cursor-grabbing">
<div class="flex justify-between items-start mb-2">
<span class="bg-nb-yellow border-2 border-black px-2 py-0.5 text-xs font-bold uppercase">Research</span>
</div>
<h4 class="font-bold mb-2">Competitor analysis</h4>
<div class="flex justify-between items-center mt-4">
<div class="flex -space-x-2">
<div class="w-8 h-8 bg-gray-200 rounded-full border-2 border-black overflow-hidden">
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Aneka" alt="Avatar">
</div>
<div class="w-8 h-8 bg-gray-200 rounded-full border-2 border-black overflow-hidden">
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Bob" alt="Avatar">
</div>
</div>
</div>
</div>
</div>
<!-- Column 2: In Progress -->
<div class="w-80 flex-shrink-0 flex flex-col gap-4">
<div class="bg-nb-blue border-3 border-black p-3 font-black uppercase flex justify-between items-center shadow-nb-sm">
<span>In Progress</span>
<span class="bg-white border-2 border-black px-2 text-xs rounded-full">1</span>
</div>
<!-- Task Card -->
<div class="bg-white border-3 border-black p-4 shadow-nb-sm hover:shadow-nb-hover hover:-translate-y-1 transition-all cursor-grab active:cursor-grabbing">
<div class="flex justify-between items-start mb-2">
<span class="bg-nb-green border-2 border-black px-2 py-0.5 text-xs font-bold uppercase">Dev</span>
</div>
<h4 class="font-bold mb-2">Implement authentication flow</h4>
<div class="w-full bg-gray-200 h-2 border-2 border-black rounded-full mt-2 mb-3 overflow-hidden">
<div class="bg-nb-green h-full w-2/3"></div>
</div>
<div class="flex justify-between items-center">
<div class="flex -space-x-2">
<div class="w-8 h-8 bg-gray-200 rounded-full border-2 border-black overflow-hidden">
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Jack" alt="Avatar">
</div>
</div>
<span class="text-xs font-bold text-nb-orange">Due Tomorrow</span>
</div>
</div>
</div>
<!-- Column 3: Done -->
<div class="w-80 flex-shrink-0 flex flex-col gap-4">
<div class="bg-nb-green border-3 border-black p-3 font-black uppercase flex justify-between items-center shadow-nb-sm">
<span>Done</span>
<span class="bg-white border-2 border-black px-2 text-xs rounded-full">5</span>
</div>
<!-- Task Card -->
<div class="bg-gray-100 border-3 border-black p-4 opacity-70">
<h4 class="font-bold mb-2 line-through text-gray-500">Initial project setup</h4>
</div>
</div>
</div>
</section>
<section v-else-if="activeTab === 'charts'" class="space-y-12 animate-fade-in">
<h3 class="text-2xl font-black border-b-3 border-black pb-2 inline-block bg-nb-green px-4 shadow-nb-sm">10. Analytics Charts</h3>
<div class="grid lg:grid-cols-2 gap-8">
<!-- Bar Chart (CSS Only) -->
<div class="nb-card p-8">
<div class="flex justify-between items-center mb-8">
<h4 class="font-bold text-xl">Weekly Traffic</h4>
<select class="bg-white border-2 border-black px-2 py-1 font-bold text-sm">
<option>Last 7 Days</option>
<option>Last Month</option>
</select>
</div>
<div class="flex items-end justify-between h-64 gap-2">
<div class="w-full bg-nb-pink border-3 border-black relative group hover:-translate-y-1 transition-transform" style="height: 40%">
<div class="absolute -top-8 left-1/2 -translate-x-1/2 font-bold text-xs opacity-0 group-hover:opacity-100 transition-opacity">40%</div>
</div>
<div class="w-full bg-nb-blue border-3 border-black relative group hover:-translate-y-1 transition-transform" style="height: 70%">
<div class="absolute -top-8 left-1/2 -translate-x-1/2 font-bold text-xs opacity-0 group-hover:opacity-100 transition-opacity">70%</div>
</div>
<div class="w-full bg-nb-yellow border-3 border-black relative group hover:-translate-y-1 transition-transform" style="height: 55%">
<div class="absolute -top-8 left-1/2 -translate-x-1/2 font-bold text-xs opacity-0 group-hover:opacity-100 transition-opacity">55%</div>
</div>
<div class="w-full bg-nb-green border-3 border-black relative group hover:-translate-y-1 transition-transform" style="height: 85%">
<div class="absolute -top-8 left-1/2 -translate-x-1/2 font-bold text-xs opacity-0 group-hover:opacity-100 transition-opacity">85%</div>
</div>
<div class="w-full bg-nb-orange border-3 border-black relative group hover:-translate-y-1 transition-transform" style="height: 60%">
<div class="absolute -top-8 left-1/2 -translate-x-1/2 font-bold text-xs opacity-0 group-hover:opacity-100 transition-opacity">60%</div>
</div>
<div class="w-full bg-nb-purple border-3 border-black relative group hover:-translate-y-1 transition-transform" style="height: 90%">
<div class="absolute -top-8 left-1/2 -translate-x-1/2 font-bold text-xs opacity-0 group-hover:opacity-100 transition-opacity">90%</div>
</div>
<div class="w-full bg-gray-800 border-3 border-black relative group hover:-translate-y-1 transition-transform" style="height: 50%">
<div class="absolute -top-8 left-1/2 -translate-x-1/2 font-bold text-xs opacity-0 group-hover:opacity-100 transition-opacity">50%</div>
</div>
</div>
<div class="flex justify-between mt-4 font-bold text-sm text-gray-500 uppercase">
<span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span>
</div>
</div>
<!-- Activity Timeline -->
<div class="nb-card p-8">
<h4 class="font-bold text-xl mb-6">Activity Timeline</h4>
<div class="space-y-6 relative before:absolute before:left-4 before:top-2 before:bottom-2 before:w-1 before:bg-black">
<div class="relative pl-12">
<div class="absolute left-2 top-1 w-5 h-5 bg-nb-blue border-3 border-black rounded-full z-10"></div>
<p class="text-sm text-gray-500 font-bold mb-1">Just now</p>
<p class="font-bold">New order received <span class="text-nb-blue">#ORD-9921</span></p>
</div>
<div class="relative pl-12">
<div class="absolute left-2 top-1 w-5 h-5 bg-nb-yellow border-3 border-black rounded-full z-10"></div>
<p class="text-sm text-gray-500 font-bold mb-1">2 hours ago</p>
<p class="font-bold">Meeting with <span class="underline decoration-2 decoration-nb-yellow">Marketing Team</span></p>
</div>
<div class="relative pl-12">
<div class="absolute left-2 top-1 w-5 h-5 bg-nb-pink border-3 border-black rounded-full z-10"></div>
<p class="text-sm text-gray-500 font-bold mb-1">Yesterday</p>
<p class="font-bold">Project <span class="bg-black text-white px-1 text-xs">ALPHA</span> deployed to production</p>
</div>
<div class="relative pl-12">
<div class="absolute left-2 top-1 w-5 h-5 bg-white border-3 border-black rounded-full z-10"></div>
<p class="text-sm text-gray-500 font-bold mb-1">Nov 15</p>
<p class="font-bold">System maintenance completed</p>
</div>
</div>
</div>
</div>
</section>
<section v-else-if="activeTab === 'chat'" class="space-y-12 animate-fade-in">
<h3 class="text-2xl font-black border-b-3 border-black pb-2 inline-block bg-nb-blue px-4 shadow-nb-sm">11. Chat Interface</h3>
<div class="nb-card h-[600px] flex overflow-hidden">
<!-- Chat Sidebar -->
<div class="w-80 border-r-3 border-black bg-gray-50 flex flex-col">
<div class="p-4 border-b-3 border-black">
<input type="text" placeholder="Search chats..." class="w-full bg-white border-3 border-black px-3 py-2 font-bold text-sm outline-none">
</div>
<div class="flex-1 overflow-y-auto">
<div class="p-4 border-b-3 border-black bg-nb-yellow/20 cursor-pointer hover:bg-nb-yellow/40 transition-colors">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-gray-200 rounded-full border-2 border-black overflow-hidden">
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Felix" alt="Avatar">
</div>
<div class="flex-1 min-w-0">
<div class="flex justify-between items-baseline">
<h5 class="font-black truncate">Felix</h5>
<span class="text-xs font-bold text-gray-500">12:30</span>
</div>
<p class="text-sm truncate text-gray-600">Hey, did you see the new design?</p>
</div>
</div>
</div>
<div class="p-4 border-b-3 border-black cursor-pointer hover:bg-gray-100 transition-colors">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-gray-200 rounded-full border-2 border-black overflow-hidden">
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Aneka" alt="Avatar">
</div>
<div class="flex-1 min-w-0">
<div class="flex justify-between items-baseline">
<h5 class="font-black truncate">Aneka</h5>
<span class="text-xs font-bold text-gray-500">Yesterday</span>
</div>
<p class="text-sm truncate text-gray-600">Meeting rescheduled to 3 PM.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Chat Area -->
<div class="flex-1 flex flex-col bg-white">
<div class="p-4 border-b-3 border-black flex justify-between items-center bg-white">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-gray-200 rounded-full border-2 border-black overflow-hidden">
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Felix" alt="Avatar">
</div>
<div>
<h5 class="font-black">Felix</h5>
<div class="flex items-center gap-1">
<div class="w-2 h-2 bg-nb-green rounded-full border border-black"></div>
<span class="text-xs font-bold text-gray-500">Online</span>
</div>
</div>
</div>
<button class="p-2 hover:bg-gray-100 rounded border-2 border-transparent hover:border-black"><i class="ph ph-dots-three-vertical text-xl"></i></button>
</div>
<div class="flex-1 overflow-y-auto p-6 space-y-6 bg-nb-gray/30">
<div class="flex gap-4">
<div class="w-8 h-8 bg-gray-200 rounded-full border-2 border-black overflow-hidden flex-shrink-0">
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Felix" alt="Avatar">
</div>
<div class="bg-white border-3 border-black p-4 shadow-nb-sm max-w-md rounded-tr-xl rounded-br-xl rounded-bl-xl">
<p class="font-medium">Yo! Have you checked out the new Neo-Brutalism UI kit?</p>
</div>
</div>
<div class="flex gap-4 flex-row-reverse">
<div class="w-8 h-8 bg-nb-blue rounded-full border-2 border-black overflow-hidden flex-shrink-0 flex items-center justify-center font-bold text-xs">
ME
</div>
<div class="bg-nb-blue border-3 border-black p-4 shadow-nb-sm max-w-md rounded-tl-xl rounded-bl-xl rounded-br-xl">
<p class="font-medium">Yeah, it looks sick! The hard shadows and bold borders are exactly what we needed.</p>
</div>
</div>
<div class="flex gap-4">
<div class="w-8 h-8 bg-gray-200 rounded-full border-2 border-black overflow-hidden flex-shrink-0">
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Felix" alt="Avatar">
</div>
<div class="bg-white border-3 border-black p-4 shadow-nb-sm max-w-md rounded-tr-xl rounded-br-xl rounded-bl-xl">
<p class="font-medium">Awesome. Let's start implementing it on the dashboard.</p>
</div>
</div>
</div>
<div class="p-4 border-t-3 border-black bg-white">
<div class="flex gap-2">
<button class="p-3 border-3 border-black hover:bg-gray-100"><i class="ph ph-paperclip text-xl"></i></button>
<input type="text" placeholder="Type a message..." class="flex-1 bg-gray-50 border-3 border-black px-4 font-bold outline-none focus:bg-white transition-colors">
<button class="p-3 bg-nb-yellow border-3 border-black hover:shadow-nb-hover hover:-translate-y-1 transition-all"><i class="ph ph-paper-plane-right text-xl"></i></button>
</div>
</div>
</div>
</div>
</section>
<section v-else-if="activeTab === 'files'" class="space-y-12 animate-fade-in">
<h3 class="text-2xl font-black border-b-3 border-black pb-2 inline-block bg-nb-purple px-4 shadow-nb-sm">12. File Manager</h3>
<div class="nb-card p-6">
<div class="flex justify-between items-center mb-6">
<div class="flex gap-2">
<button class="nb-btn bg-nb-yellow px-4 py-2 text-sm"><i class="ph ph-folder-plus text-lg"></i> New Folder</button>
<button class="nb-btn bg-white px-4 py-2 text-sm"><i class="ph ph-upload-simple text-lg"></i> Upload</button>
</div>
<div class="flex items-center gap-2 border-3 border-black px-3 py-1 bg-white">
<i class="ph ph-magnifying-glass"></i>
<input type="text" placeholder="Search files..." class="outline-none font-bold text-sm w-48">
</div>
</div>
<!-- Folders -->
<h4 class="font-bold text-lg mb-4 uppercase text-gray-500">Folders</h4>
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 mb-8">
<div class="bg-nb-blue/20 border-3 border-black p-4 flex flex-col items-center gap-2 hover:bg-nb-blue hover:shadow-nb-sm transition-all cursor-pointer group">
<i class="ph ph-folder-notch text-4xl group-hover:scale-110 transition-transform"></i>
<span class="font-bold text-sm truncate w-full text-center">Documents</span>
</div>
<div class="bg-nb-pink/20 border-3 border-black p-4 flex flex-col items-center gap-2 hover:bg-nb-pink hover:shadow-nb-sm transition-all cursor-pointer group">
<i class="ph ph-folder-notch text-4xl group-hover:scale-110 transition-transform"></i>
<span class="font-bold text-sm truncate w-full text-center">Images</span>
</div>
<div class="bg-nb-green/20 border-3 border-black p-4 flex flex-col items-center gap-2 hover:bg-nb-green hover:shadow-nb-sm transition-all cursor-pointer group">
<i class="ph ph-folder-notch text-4xl group-hover:scale-110 transition-transform"></i>
<span class="font-bold text-sm truncate w-full text-center">Work</span>
</div>
</div>
<!-- Recent Files -->
<h4 class="font-bold text-lg mb-4 uppercase text-gray-500">Recent Files</h4>
<div class="overflow-x-auto">
<table class="w-full text-left border-collapse">
<thead>
<tr class="border-b-3 border-black">
<th class="p-3 font-black uppercase text-sm">Name</th>
<th class="p-3 font-black uppercase text-sm">Size</th>
<th class="p-3 font-black uppercase text-sm">Type</th>
<th class="p-3 font-black uppercase text-sm">Modified</th>
<th class="p-3 font-black uppercase text-sm text-right">Action</th>
</tr>
</thead>
<tbody class="font-bold text-sm">
<tr class="border-b-2 border-gray-200 hover:bg-gray-50">
<td class="p-3 flex items-center gap-3">
<i class="ph ph-file-pdf text-2xl text-red-500"></i>
Project_Specs.pdf
</td>
<td class="p-3 text-gray-500">2.4 MB</td>
<td class="p-3"><span class="bg-gray-200 px-2 py-0.5 text-xs border border-black">PDF</span></td>
<td class="p-3 text-gray-500">Today, 10:23 AM</td>
<td class="p-3 text-right"><button class="hover:bg-gray-200 p-1 rounded"><i class="ph ph-dots-three text-xl"></i></button></td>
</tr>
<tr class="border-b-2 border-gray-200 hover:bg-gray-50">
<td class="p-3 flex items-center gap-3">
<i class="ph ph-file-image text-2xl text-nb-purple"></i>
Banner_Design.png
</td>
<td class="p-3 text-gray-500">4.1 MB</td>
<td class="p-3"><span class="bg-gray-200 px-2 py-0.5 text-xs border border-black">PNG</span></td>
<td class="p-3 text-gray-500">Yesterday, 4:15 PM</td>
<td class="p-3 text-right"><button class="hover:bg-gray-200 p-1 rounded"><i class="ph ph-dots-three text-xl"></i></button></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Section 8: Settings & Profile -->
<section v-else-if="activeTab === 'settings'" class="space-y-12 animate-fade-in">
<h3 class="text-2xl font-black border-b-3 border-black pb-2 inline-block bg-nb-orange px-4 shadow-nb-sm">13. Settings & Profile</h3>
<div class="grid lg:grid-cols-3 gap-8">
<!-- Settings Panel -->
<div class="lg:col-span-2 nb-card p-8">
<h4 class="font-bold text-xl mb-6 border-b-3 border-black pb-2">General Settings</h4>
<div class="space-y-6">
<div class="grid md:grid-cols-2 gap-6">
<div>
<label class="block font-bold mb-2 text-sm uppercase">Site Name</label>
<input type="text" class="nb-input w-full px-4 py-2 font-bold bg-gray-50" value="Neo-Brutalism Admin">
</div>
<div>
<label class="block font-bold mb-2 text-sm uppercase">Support Email</label>
<input type="email" class="nb-input w-full px-4 py-2 font-bold bg-gray-50" value="support@example.com">
</div>
</div>
<div>
<label class="block font-bold mb-2 text-sm uppercase">Bio</label>
<textarea class="nb-input w-full px-4 py-2 font-bold bg-gray-50 h-24 resize-none">A collection of raw, unpolished UI components for modern web applications.</textarea>
</div>
<div class="border-t-3 border-black pt-6">
<h5 class="font-bold mb-4">Notifications</h5>
<div class="space-y-3">
<label class="flex items-center justify-between cursor-pointer group p-3 border-2 border-transparent hover:border-black hover:bg-gray-50 transition-all">
<span class="font-bold">Email Notifications</span>
<div class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" value="" class="sr-only peer" checked>
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none border-3 border-black rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-3 after:w-3 after:transition-all peer-checked:bg-nb-green after:border-2 after:border-black"></div>
</div>
</label>
<label class="flex items-center justify-between cursor-pointer group p-3 border-2 border-transparent hover:border-black hover:bg-gray-50 transition-all">
<span class="font-bold">Push Notifications</span>
<div class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" value="" class="sr-only peer">
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none border-3 border-black rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-3 after:w-3 after:transition-all peer-checked:bg-nb-green after:border-2 after:border-black"></div>
</div>
</label>
</div>
</div>
<div class="flex justify-end gap-4 pt-4">
<button class="nb-btn bg-white px-6 py-2">Cancel</button>
<button class="nb-btn bg-nb-blue px-6 py-2">Save Changes</button>
</div>
</div>
</div>
<!-- User Profile Card -->
<div class="space-y-8">
<div class="nb-card overflow-hidden">
<div class="h-32 bg-nb-purple border-b-3 border-black relative">
<div class="absolute -bottom-12 left-1/2 -translate-x-1/2 w-24 h-24 bg-white border-3 border-black rounded-full overflow-hidden">
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Felix" alt="Avatar" class="w-full h-full">
</div>
</div>
<div class="pt-16 pb-8 px-6 text-center">
<h4 class="font-black text-2xl">Jane Doe</h4>
<p class="text-gray-500 font-bold text-sm mb-4">Senior Product Designer</p>
<div class="flex justify-center gap-2 mb-6">
<span class="bg-nb-yellow border-2 border-black px-2 py-0.5 text-xs font-bold uppercase">Pro</span>
<span class="bg-nb-pink border-2 border-black px-2 py-0.5 text-xs font-bold uppercase">Admin</span>
</div>
<div class="grid grid-cols-3 gap-4 border-t-3 border-black pt-6">
<div>
<h5 class="font-black text-xl">124</h5>
<p class="text-xs font-bold text-gray-500 uppercase">Projects</p>
</div>
<div>
<h5 class="font-black text-xl">3.5k</h5>
<p class="text-xs font-bold text-gray-500 uppercase">Followers</p>
</div>
<div>
<h5 class="font-black text-xl">48</h5>
<p class="text-xs font-bold text-gray-500 uppercase">Reviews</p>
</div>
</div>
<button class="nb-btn bg-black text-white w-full mt-6 py-2">Edit Profile</button>
</div>
</div>
<!-- Pricing Table (Mini) -->
<div class="nb-card p-6 bg-nb-yellow">
<div class="flex justify-between items-start mb-4">
<h4 class="font-black text-xl uppercase">Pro Plan</h4>
<span class="bg-white border-2 border-black px-2 py-1 text-xs font-bold">ACTIVE</span>
</div>
<div class="text-4xl font-black mb-4">$29<span class="text-lg font-bold text-gray-700">/mo</span></div>
<ul class="space-y-2 mb-6 font-bold text-sm">
<li class="flex items-center gap-2"><i class="ph ph-check-circle text-xl"></i> Unlimited Projects</li>
<li class="flex items-center gap-2"><i class="ph ph-check-circle text-xl"></i> Priority Support</li>
<li class="flex items-center gap-2"><i class="ph ph-check-circle text-xl"></i> Advanced Analytics</li>
</ul>
<button class="nb-btn bg-white w-full py-2">Upgrade Plan</button>
</div>
</div>
</div>
</section>
<!-- Placeholder for other sections -->
<div v-else class="nb-card p-12 flex flex-col items-center justify-center min-h-[400px] text-center animate-fade-in">
<div class="text-8xl mb-6 animate-bounce">🚧</div>
<h3 class="text-4xl font-black mb-4 uppercase">Work in Progress</h3>
<p class="text-xl font-medium max-w-md">The component section "<span class="bg-nb-yellow px-2 border-2 border-black">{{ currentTabName }}</span>" is currently under construction.</p>
<button @click="activeTab = 'foundation'" class="mt-8 nb-btn bg-nb-blue px-8 py-4 text-lg">Go Back Home</button>
</div>
</div>
</main>
</div>
<script>
const {
createApp,
ref,
computed
} = Vue;
createApp({
setup() {
const activeTab = ref('foundation');
const sidebarCollapsed = ref(false);
const menuSections = [{
title: 'Core',
items: [{
id: 'foundation',
name: 'Foundation',
icon: 'ph-cube'
},
{
id: 'forms',
name: 'Forms & Inputs',
icon: 'ph-pencil-simple'
},
{
id: 'navigation',
name: 'Navigation',
icon: 'ph-compass'
}
]
},
{
title: 'Components',
items: [{
id: 'cards',
name: 'Cards & Layout',
icon: 'ph-squares-four'
},
{
id: 'tables',
name: 'Data Tables',
icon: 'ph-table'
},
{
id: 'feedback',
name: 'Feedback',
icon: 'ph-bell-ringing'
}
]
},
{
title: 'Advanced',
items: [{
id: 'kanban',
name: 'Kanban Board',
icon: 'ph-kanban'
},
{
id: 'charts',
name: 'Analytics',
icon: 'ph-chart-bar'
},
{
id: 'chat',
name: 'Chat Interface',
icon: 'ph-chat-circle-dots'
},
{
id: 'files',
name: 'File Manager',
icon: 'ph-folder-open'
},
{
id: 'settings',
name: 'Settings & Profile',
icon: 'ph-gear'
}
]
}
];
const currentTabName = computed(() => {
for (const section of menuSections) {
const found = section.items.find(item => item.id === activeTab.value);
if (found) return found.name;
}
return 'Dashboard';
});
return {
activeTab,
sidebarCollapsed,
menuSections,
currentTabName
}
}
}).mount('#app');
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment