Community Forum Component 9
A Community Forum component featuring a glassmorphism design with frosted glass-like translucent elements, responsive effects, and dark theme support.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center">
<div class="bg-white dark:bg-gray-800 backdrop-filter backdrop-blur-lg opacity-80 rounded-lg shadow-lg p-6 max-w-lg w-full">
<h1 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Community Forum</h1>
<div class="space-y-4">
<div class="flex items-center space-x-2 bg-white dark:bg-gray-700 p-4 rounded-lg shadow">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-10 h-10">
<div>
<h2 class="text-gray-800 dark:text-white font-bold">John Doe</h2>
<p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="flex items-center space-x-2 bg-white dark:bg-gray-700 p-4 rounded-lg shadow">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="rounded-full w-10 h-10">
<div>
<h2 class="text-gray-800 dark:text-white font-bold">Jane Smith</h2>
<p class="text-gray-600 dark:text-gray-300">Vivamus laoreet dolor eget lectus tincidunt, et facilisis erat laoreet.</p>
</div>
</div>
<div class="flex items-center space-x-2 bg-white dark:bg-gray-700 p-4 rounded-lg shadow">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="rounded-full w-10 h-10">
<div>
<h2 class="text-gray-800 dark:text-white font-bold">Alex Johnson</h2>
<p class="text-gray-600 dark:text-gray-300">Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</p>
</div>
</div>
</div>
<div class="mt-4">
<textarea class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white" rows="4" placeholder="Write your message..."></textarea>
<button class="mt-2 w-full bg-blue-500 dark:bg-blue-600 text-white rounded-lg py-2 hover:bg-blue-600 dark:hover:bg-blue-700 transition">Post Message</button>
</div>
</div>
</div>Related Components
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.
Community Forum Component
A minimalist community forum component for e-commerce, featuring a clean design, triadic color scheme, and dark mode support.
Community Forum Component
Community Forum Component with Neumorphism design, Grayscale color scheme, and Simple complexity for Social Media using Tailwind CSS. Responsive design with dark theme support.