Komponente des Brutalistischen Community-Forums
Eine Community-Forenkomponente im brutalistischen Stil für Social-Media-Schnittstellen mit leuchtenden Farben, moderater Komplexität und Unterstützung für den Dunkelmodus. Enthält eine Liste von Forenbeiträgen mit fetter Typografie, kontrastreichen Elementen und asymmetrischen Layouts, die typisch für brutalistisches Design sind. Enthält Beitragselemente mit Benutzer-Avataren, Interaktionsschaltflächen und eine rohe, absichtlich grobe Ästhetik mit lebendigen Farbakzenten.
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>Verwandte Komponenten
Community-Forum-Komponente
Eine einfache Community-Forenkomponente unter Verwendung von Material Design-Prinzipien, die auf den Konsum von Blog-Inhalten mit Erdtönen und responsivem Design für die Unterstützung des Dunkelmodus zugeschnitten ist.
Community-Forum-Komponente
Community-Forum-Komponente mit Glassmorphism-Design, lebendigem Farbschema, komplexer Komplexitätsstufe, für Blog-/Content-Zwecke, responsives Design mit Unterstützung für dunkle Themen, unter Verwendung von Tailwind CSS.
Community-Forum-Komponente
Eine reaktionsschnelle Community-Forenkomponente, die nach Material Design-Prinzipien entwickelt wurde und sich für den Konsum von Blogs und Inhalten eignet. Es verfügt über ein Rasterlayout, interaktive Elemente und unterstützt dunkle Designs mit Tailwind CSS.