Brutalist Community Forum 구성 요소
소셜 미디어를 위한 브루탈리즘 스타일의 커뮤니티 포럼 구성 요소는 생생한 색상, 적당한 복잡성 및 다크 모드 지원을 제공합니다. 대담한 타이포그래피, 고대비 요소, 브루탈리즘 디자인의 전형적인 비대칭 레이아웃이 포함된 포럼 게시물 목록이 있습니다. 사용자 아바타, 상호 작용 버튼, 생생한 색상 악센트가 있는 원시적이고 의도적으로 조잡한 미학이 있는 게시물 항목이 포함됩니다.
HTML 코드
<!-- 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>관련 구성 요소
Community Forum 구성 요소
금융/뱅킹을 위한 반응형 커뮤니티 포럼 구성 요소로, 머티리얼 디자인 스타일과 캔디/스위트 색상 구성표, 풍선껌 핑크 및 민트 그린과 같은 밝은 색상, 다크 모드 지원 및 시맨틱 HTML을 특징으로 합니다.
Community Forum 구성 요소
포트폴리오를 위한 Neumorphism 스타일의 커뮤니티 포럼 구성 요소로, 파스텔 색상 구성표와 어두운 테마를 지원하는 복잡하고 반응이 빠른 디자인을 특징으로 합니다. 여기에는 포럼 목록, 최근 활동 및 사용자 프로필이 포함되며, 모두 JavaScript 없이 Tailwind CSS를 사용하여 구현됩니다.
Community Forum 구성 요소
Material Design 원칙에 따라 설계된 반응형 커뮤니티 포럼 구성 요소로, 블로그 및 콘텐츠 소비에 적합합니다. 그리드 레이아웃, 대화형 요소를 특징으로 하며 Tailwind CSS를 사용하여 어두운 테마를 지원합니다.