Brutalist Community Forum Component
A brutalist-style community forum component for social media interfaces with vibrant colors, moderate complexity, and dark mode support. Features a forum post list with bold typography, high contrast elements, and asymmetrical layouts typical of brutalist design. Includes post items with user avatars, interaction buttons, and a raw, intentionally crude aesthetic with vibrant color accents.
HTML Code
<!-- Brutalist Community Forum Component -->
<div class="font-mono w-full bg-zinc-100 dark:bg-zinc-900 min-h-screen p-4">
<!-- Brutalist Header Banner with Asymmetrical Design -->
<div class="bg-fuchsia-600 dark:bg-fuchsia-800 p-6 mb-8 border-4 border-black dark:border-fuchsia-500 transform -rotate-1">
<h1 class="text-4xl md:text-6xl font-black text-black dark:text-white uppercase tracking-tighter">COMMUNITY FORUM</h1>
<div class="flex justify-between items-center mt-3">
<p class="text-black dark:text-white font-bold">RAW CONVERSATIONS. UNFILTERED.</p>
<div class="bg-yellow-400 dark:bg-yellow-500 p-2 border-2 border-black dark:border-white transform rotate-3">
<span class="text-black font-black text-xl">NOW!</span>
</div>
</div>
</div>
<!-- Community Statistics -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
<div class="bg-lime-500 dark:bg-lime-600 p-4 border-2 border-black dark:border-white transform rotate-1">
<p class="text-black font-black text-2xl">1,243</p>
<p class="text-black font-bold uppercase">Members</p>
</div>
<div class="bg-cyan-500 dark:bg-cyan-600 p-4 border-2 border-black dark:border-white transform -rotate-1">
<p class="text-black font-black text-2xl">347</p>
<p class="text-black font-bold uppercase">Topics</p>
</div>
<div class="bg-yellow-400 dark:bg-yellow-500 p-4 border-2 border-black dark:border-white transform rotate-2">
<p class="text-black font-black text-2xl">8,921</p>
<p class="text-black font-bold uppercase">Posts</p>
</div>
<div class="bg-pink-500 dark:bg-pink-600 p-4 border-2 border-black dark:border-white transform -rotate-2">
<p class="text-black font-black text-2xl">142</p>
<p class="text-black font-bold uppercase">Online</p>
</div>
</div>
<!-- Topic Categories -->
<div class="mb-8">
<h2 class="text-2xl font-black uppercase tracking-tight text-black dark:text-white mb-4 border-b-4 border-black dark:border-white pb-2">CATEGORIES</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-red-500 dark:bg-red-600 p-4 border-2 border-black dark:border-white">
<h3 class="text-black font-black text-xl uppercase">GENERAL</h3>
</div>
<div class="bg-blue-500 dark:bg-blue-600 p-4 border-2 border-black dark:border-white">
<h3 class="text-black font-black text-xl uppercase">TECH TALK</h3>
</div>
<div class="bg-green-500 dark:bg-green-600 p-4 border-2 border-black dark:border-white">
<h3 class="text-black font-black text-xl uppercase">CREATIVE WORK</h3>
</div>
</div>
</div>
<!-- Post Creation Box -->
<div class="bg-zinc-200 dark:bg-zinc-800 p-5 mb-8 border-4 border-black dark:border-zinc-600">
<div class="flex items-center gap-4 mb-4">
<div class="w-12 h-12 border-2 border-black dark:border-white overflow-hidden bg-purple-400">
<img src="https://randomuser.me/api/portraits/women/47.jpg" alt="User avatar" class="w-full h-full object-cover">
</div>
<h2 class="text-xl font-black text-black dark:text-white uppercase">START A CONVERSATION</h2>
</div>
<div class="border-2 border-black dark:border-white bg-white dark:bg-zinc-700 p-3 mb-4">
<p class="text-zinc-400 dark:text-zinc-300 font-bold">What's on your mind?</p>
</div>
<div class="flex justify-between">
<div class="flex gap-2">
<button class="bg-yellow-400 hover:bg-yellow-500 dark:bg-yellow-600 dark:hover:bg-yellow-700 text-black font-bold py-1 px-3 border-2 border-black dark:border-white">IMAGE</button>
<button class="bg-pink-500 hover:bg-pink-600 dark:bg-pink-600 dark:hover:bg-pink-700 text-black font-bold py-1 px-3 border-2 border-black dark:border-white">POLL</button>
</div>
<button class="bg-purple-500 hover:bg-purple-600 dark:bg-purple-600 dark:hover:bg-purple-700 text-black font-bold py-1 px-4 border-2 border-black dark:border-white transform rotate-1">POST!</button>
</div>
</div>
<!-- Forum Posts -->
<div class="mb-8">
<h2 class="text-2xl font-black uppercase tracking-tight text-black dark:text-white mb-4 border-b-4 border-black dark:border-white pb-2">RECENT POSTS</h2>
<!-- Post 1 -->
<div class="bg-white dark:bg-zinc-800 p-5 mb-6 border-4 border-black dark:border-zinc-600 transform -rotate-0.5">
<div class="flex justify-between items-start mb-4">
<div class="flex gap-3">
<div class="w-12 h-12 border-2 border-black dark:border-white overflow-hidden">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="font-extrabold text-black dark:text-white">BRUTALIST_CODER42</h3>
<p class="text-sm text-zinc-500 dark:text-zinc-400">Posted 2 hours ago in TECH TALK</p>
</div>
</div>
<div class="bg-lime-300 dark:bg-lime-600 p-1 border border-black dark:border-white">
<span class="text-xs text-black font-bold">HOT!</span>
</div>
</div>
<div class="mb-4">
<h4 class="text-xl font-black text-black dark:text-white mb-2 uppercase">ANYONE TRIED THE NEW FRAMEWORK YET?</h4>
<p class="text-black dark:text-zinc-200">Just deployed my first project with it and I'm blown away by the performance. Wondering if others have similar experiences to share?</p>
</div>
<div class="mt-6 grid grid-cols-2">
<div class="flex gap-6">
<div class="flex items-center gap-1">
<div class="w-6 h-6 bg-red-500 dark:bg-red-600 flex items-center justify-center border border-black dark:border-white">
<span class="text-black font-bold text-xs">12</span>
</div>
<span class="text-black dark:text-white font-bold">LIKES</span>
</div>
<div class="flex items-center gap-1">
<div class="w-6 h-6 bg-blue-500 dark:bg-blue-600 flex items-center justify-center border border-black dark:border-white">
<span class="text-black font-bold text-xs">8</span>
</div>
<span class="text-black dark:text-white font-bold">REPLIES</span>
</div>
</div>
<div class="flex justify-end gap-2">
<button class="bg-yellow-400 hover:bg-yellow-500 dark:bg-yellow-600 dark:hover:bg-yellow-700 text-black font-bold py-1 px-3 text-sm border border-black dark:border-white">REPLY</button>
<button class="bg-cyan-400 hover:bg-cyan-500 dark:bg-cyan-600 dark:hover:bg-cyan-700 text-black font-bold py-1 px-3 text-sm border border-black dark:border-white">SHARE</button>
</div>
</div>
</div>
<!-- Post 2 with image -->
<div class="bg-white dark:bg-zinc-800 p-5 mb-6 border-4 border-black dark:border-zinc-600 transform rotate-0.5">
<div class="flex justify-between items-start mb-4">
<div class="flex gap-3">
<div class="w-12 h-12 border-2 border-black dark:border-white overflow-hidden">
<img src="https://randomuser.me/api/portraits/women/29.jpg" alt="User avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="font-extrabold text-black dark:text-white">DESIGN_REBEL</h3>
<p class="text-sm text-zinc-500 dark:text-zinc-400">Posted 5 hours ago in CREATIVE WORK</p>
</div>
</div>
<div class="bg-pink-300 dark:bg-pink-600 p-1 border border-black dark:border-white">
<span class="text-xs text-black font-bold">NEW</span>
</div>
</div>
<div class="mb-4">
<h4 class="text-xl font-black text-black dark:text-white mb-2 uppercase">MY LATEST DIGITAL ART EXPERIMENT</h4>
<p class="text-black dark:text-zinc-200 mb-4">Been playing with some brutalist styles in my latest series. What do you think of this one?</p>
<div class="border-4 border-black dark:border-white mb-3">
<img src="https://picsum.photos/seed/brutal/800/400" alt="Digital Art" class="w-full object-cover">
</div>
</div>
<div class="mt-6 grid grid-cols-2">
<div class="flex gap-6">
<div class="flex items-center gap-1">
<div class="w-6 h-6 bg-red-500 dark:bg-red-600 flex items-center justify-center border border-black dark:border-white">
<span class="text-black font-bold text-xs">47</span>
</div>
<span class="text-black dark:text-white font-bold">LIKES</span>
</div>
<div class="flex items-center gap-1">
<div class="w-6 h-6 bg-blue-500 dark:bg-blue-600 flex items-center justify-center border border-black dark:border-white">
<span class="text-black font-bold text-xs">23</span>
</div>
<span class="text-black dark:text-white font-bold">REPLIES</span>
</div>
</div>
<div class="flex justify-end gap-2">
<button class="bg-yellow-400 hover:bg-yellow-500 dark:bg-yellow-600 dark:hover:bg-yellow-700 text-black font-bold py-1 px-3 text-sm border border-black dark:border-white">REPLY</button>
<button class="bg-cyan-400 hover:bg-cyan-500 dark:bg-cyan-600 dark:hover:bg-cyan-700 text-black font-bold py-1 px-3 text-sm border border-black dark:border-white">SHARE</button>
</div>
</div>
</div>
<!-- Post 3 -->
<div class="bg-white dark:bg-zinc-800 p-5 mb-6 border-4 border-black dark:border-zinc-600 transform -rotate-0.3">
<div class="flex justify-between items-start mb-4">
<div class="flex gap-3">
<div class="w-12 h-12 border-2 border-black dark:border-white overflow-hidden">
<img src="https://randomuser.me/api/portraits/men/18.jpg" alt="User avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="font-extrabold text-black dark:text-white">RAW_THOUGHTS</h3>
<p class="text-sm text-zinc-500 dark:text-zinc-400">Posted 7 hours ago in GENERAL</p>
</div>
</div>
</div>
<div class="mb-4">
<h4 class="text-xl font-black text-black dark:text-white mb-2 uppercase">UNPOPULAR OPINION: MINIMALISM IS OVERRATED</h4>
<p class="text-black dark:text-zinc-200">I think we've gone too far with minimalism in design. Everything looks the same now. We need more personality, more chaos, more CHARACTER in our designs!</p>
</div>
<div class="mt-6 grid grid-cols-2">
<div class="flex gap-6">
<div class="flex items-center gap-1">
<div class="w-6 h-6 bg-red-500 dark:bg-red-600 flex items-center justify-center border border-black dark:border-white">
<span class="text-black font-bold text-xs">36</span>
</div>
<span class="text-black dark:text-white font-bold">LIKES</span>
</div>
<div class="flex items-center gap-1">
<div class="w-6 h-6 bg-blue-500 dark:bg-blue-600 flex items-center justify-center border border-black dark:border-white">
<span class="text-black font-bold text-xs">19</span>
</div>
<span class="text-black dark:text-white font-bold">REPLIES</span>
</div>
</div>
<div class="flex justify-end gap-2">
<button class="bg-yellow-400 hover:bg-yellow-500 dark:bg-yellow-600 dark:hover:bg-yellow-700 text-black font-bold py-1 px-3 text-sm border border-black dark:border-white">REPLY</button>
<button class="bg-cyan-400 hover:bg-cyan-500 dark:bg-cyan-600 dark:hover:bg-cyan-700 text-black font-bold py-1 px-3 text-sm border border-black dark:border-white">SHARE</button>
</div>
</div>
</div>
</div>
<!-- Load More -->
<div class="text-center">
<button class="bg-purple-500 hover:bg-purple-600 dark:bg-purple-600 dark:hover:bg-purple-700 text-black font-black py-3 px-6 border-4 border-black dark:border-white uppercase text-lg transform rotate-1 w-full md:w-auto">
LOAD MORE POSTS!
</button>
</div>
</div>Related Components
Community Forum Component
A Community Forum Component with a retro/vintage design style, featuring responsive effects and dark theme support using Tailwind CSS.
Community Forum Component
A community forum component designed with skeuomorphic elements, featuring responsive design, dark theme support, and avatar and placeholder images.
Community Forum Component
A Community Forum Component designed in Brutalism style with a vibrant color scheme, suitable for e-commerce experiences. It includes a variety of interactive elements like posts, comments, and user profiles, all styled with Tailwind CSS for a responsive design with dark theme support.