Composante du Forum communautaire brutaliste
Un composant de forum communautaire de style brutaliste pour les interfaces de médias sociaux avec des couleurs vives, une complexité modérée et une prise en charge du mode sombre. Comprend une liste de messages sur le forum avec une typographie audacieuse, des éléments très contrastés et des mises en page asymétriques typiques du design brutaliste. Comprend des articles de publication avec des avatars d’utilisateurs, des boutons d’interaction et une esthétique brute et intentionnellement grossière avec des accents de couleurs vives.
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>Composants associés
Volet Forum communautaire
Un composant de forum communautaire rétro/vintage pour le commerce électronique avec une palette de couleurs vives. Conception réactive avec prise en charge du thème sombre.
Volet Forum communautaire
Composant du forum communautaire avec conception Glassmorphism, palette de couleurs vives, niveau de complexité complexe, à des fins de blog/contenu, conception réactive avec prise en charge du thème sombre, utilisation de Tailwind CSS.
Volet Forum communautaire
Composant de forum communautaire conçu avec des éléments skeuomorphes, avec un design réactif, la prise en charge du thème sombre et des images d’avatar et d’espace réservé.