Community Forum | Code Components Hub

Community Forum Component

A minimalist community forum component for e-commerce, featuring a clean design, triadic color scheme, and dark mode support.

Open Preview

                <div class="max-w-5xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <!-- Forum Header -->
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Community Forum</h2>
    <p class="text-gray-600 dark:text-gray-300 mb-6">Join the conversation about your favorite products!</p>

    <!-- Post List -->
    <div class="space-y-4">
        <div class="flex items-start bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-sm">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4">
            <div>
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h3>
                <p class="text-gray-600 dark:text-gray-300">What is the best camera for beginners?</p>
                <div class="text-sm text-gray-500 dark:text-gray-400">12 Replies | 2 Days Ago</div>
            </div>
        </div>

        <div class="flex items-start bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-sm">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4">
            <div>
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Jane Smith</h3>
                <p class="text-gray-600 dark:text-gray-300">Can anyone recommend a good laptop?</p>
                <div class="text-sm text-gray-500 dark:text-gray-400">8 Replies | 3 Days Ago</div>
            </div>
        </div>

        <div class="flex items-start bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-sm">
            <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4">
            <div>
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Michael Johnson</h3>
                <p class="text-gray-600 dark:text-gray-300">Best headphones under $100?</p>
                <div class="text-sm text-gray-500 dark:text-gray-400">5 Replies | 1 Week Ago</div>
            </div>
        </div>
    </div>

    <!-- Post Input -->
    <div class="mt-6">
        <h4 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Start a New Discussion</h4>
        <textarea class="w-full p-3 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded-lg focus:outline-none focus:ring focus:ring-blue-400 dark:focus:ring-blue-500" rows="4" placeholder="Write your message..."></textarea>
        <button class="mt-2 px-6 py-2 bg-blue-500 text-white rounded-lg shadow hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Post</button>
    </div>
</div>

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.

Open Preview

                <!-- 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 Component

Community Forum Component with Glassmorphism design, Vibrant color scheme, Complex complexity level, for Blog/Content purpose, responsive design with dark theme support, using Tailwind CSS.

Open Preview

                <div class="bg-gray-100 dark:bg-gray-900 py-8">
  <div class="container mx-auto px-4">
    <h1 class="text-4xl font-bold text-center text-gray-800 dark:text-white mb-8">Community Forum</h1>
    
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <!-- Forum Categories -->
      <div class="md:col-span-2 backdrop-filter backdrop-blur-lg bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 rounded-lg p-6 shadow-lg">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Categories</h2>
        
        <!-- Category Card -->
        <div class="mb-4 p-4 backdrop-filter backdrop-blur-lg bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg shadow-md flex items-center justify-between">
          <div>
            <h3 class="text-xl font-semibold text-gray-800 dark:text-white">General Discussion</h3>
            <p class="text-gray-600 dark:text-gray-300">Discuss anything and everything.</p>
          </div>
          <span class="text-sm font-semibold text-blue-600 dark:text-blue-400">500+ Topics</span>
        </div>
        
        <!-- Category Card -->
        <div class="mb-4 p-4 backdrop-filter backdrop-blur-lg bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg shadow-md flex items-center justify-between">
          <div>
            <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Announcements</h3>
            <p class="text-gray-600 dark:text-gray-300">Important news and updates.</p>
          </div>
          <span class="text-sm font-semibold text-green-600 dark:text-green-400">100+ Topics</span>
        </div>

        <!-- Add More Categories -->

      </div>

      <!-- Recent Activity -->
      <div class="backdrop-filter backdrop-blur-lg bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 rounded-lg p-6 shadow-lg">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Recent Activity</h2>

        <!-- Activity Item -->
        <div class="mb-4 pb-4 border-b border-gray-300 dark:border-gray-600 last:border-b-0">
          <p class="text-gray-700 dark:text-gray-300"><span class="font-semibold text-gray-800 dark:text-white">John Doe</span> posted in <span class="font-semibold text-blue-600 dark:text-blue-400">General Discussion</span></p>
          <p class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</p>
        </div>

        <!-- Activity Item -->
        <div class="mb-4 pb-4 border-b border-gray-300 dark:border-gray-600 last:border-b-0">
          <p class="text-gray-700 dark:text-gray-300"><span class="font-semibold text-gray-800 dark:text-white">Jane Smith</span> replied in <span class="font-semibold text-green-600 dark:text-green-400">Announcements</span></p>
          <p class="text-sm text-gray-500 dark:text-gray-400">1 hour ago</p>
        </div>

        <!-- Add More Activity -->

      </div>
    </div>
  </div>
</div>

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.

Open Preview

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-red-600 dark:text-yellow-300 mb-4">Community Forum</h2>
    <div class="mb-4">
        <input type="text" placeholder="Search..." class="w-full p-2 border border-red-500 dark:border-yellow-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-600 dark:focus:ring-yellow-300" />
    </div>
    <div class="space-y-6">
        <!-- Forum Post -->
        <div class="p-4 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-100 dark:bg-gray-700">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
                <div class="ml-3">
                    <h3 class="text-lg font-semibold text-blue-600 dark:text-blue-300">John Doe</h3>
                    <span class="text-gray-500 dark:text-gray-400">Posted on 12 Oct 2023</span>
                </div>
            </div>
            <p class="text-gray-700 dark:text-gray-300 mb-3">This is a sample forum post discussing the latest trends in e-commerce. Feel free to share your thoughts!</p>
            <div class="flex space-x-4">
                <button class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600 dark:bg-yellow-500 dark:hover:bg-yellow-600">Comment</button>
                <button class="bg-white text-red-500 border border-red-500 px-4 py-2 rounded hover:bg-red-500 hover:text-white dark:bg-gray-800 dark:text-yellow-300 dark:border-yellow-300 dark:hover:bg-yellow-500">Like</button>
            </div>
            <div class="mt-4">
                <span class="text-gray-500 dark:text-gray-400">2 Comments</span>
            </div>
        </div>
        <!-- Repeat Forum Post as needed -->
        <div class="p-4 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-100 dark:bg-gray-700">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
                <div class="ml-3">
                    <h3 class="text-lg font-semibold text-blue-600 dark:text-blue-300">Jane Smith</h3>
                    <span class="text-gray-500 dark:text-gray-400">Posted on 10 Oct 2023</span>
                </div>
            </div>
            <p class="text-gray-700 dark:text-gray-300 mb-3">Excited about the new sales coming this holiday season! Anyone else?</p>
            <div class="flex space-x-4">
                <button class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600 dark:bg-yellow-500 dark:hover:bg-yellow-600">Comment</button>
                <button class="bg-white text-red-500 border border-red-500 px-4 py-2 rounded hover:bg-red-500 hover:text-white dark:bg-gray-800 dark:text-yellow-300 dark:border-yellow-300 dark:hover:bg-yellow-500">Like</button>
            </div>
            <div class="mt-4">
                <span class="text-gray-500 dark:text-gray-400">5 Comments</span>
            </div>
        </div>
    </div>
</div>

Community Forum Component

A responsive Community Forum Component designed in Glassmorphism style with Earth tones, suitable for social media platforms. It features a frosted glass effect and is compatible with dark mode.

Open Preview

                <div class="min-h-screen bg-gray-800 flex flex-col items-center justify-center p-10">
    <div class="bg-white bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-6 max-w-3xl w-full">
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Community Forum</h1>
        <div class="space-y-4">
            <!-- Post Example -->
            <div class="bg-white bg-opacity-20 rounded-lg p-4 shadow-md">
                <div class="flex items-center">
                    <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
                    <div class="ml-3">
                        <h2 class="font-semibold text-gray-900 dark:text-white">John Doe</h2>
                        <span class="text-sm text-gray-600 dark:text-gray-300">2 hours ago</span>
                    </div>
                </div>
                <p class="mt-2 text-gray-800 dark:text-gray-200">What do you all think about the latest trends in technology?</p>
            </div>
            <!-- Post Example -->
            <div class="bg-white bg-opacity-20 rounded-lg p-4 shadow-md">
                <div class="flex items-center">
                    <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
                    <div class="ml-3">
                        <h2 class="font-semibold text-gray-900 dark:text-white">Jane Smith</h2>
                        <span class="text-sm text-gray-600 dark:text-gray-300">1 hour ago</span>
                    </div>
                </div>
                <p class="mt-2 text-gray-800 dark:text-gray-200">I believe we are on the cusp of major changes in this field!</p>
            </div>
        </div>
        <div class="mt-6">
            <textarea class="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white bg-opacity-20 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-600 dark:focus:ring-blue-500" rows="3" placeholder="Share your thoughts..."></textarea>
            <button class="mt-2 w-full py-2 bg-blue-500 text-white font-semibold rounded-lg hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-500">Post</button>
        </div>
    </div>
</div>

Community Forum Component

A responsive and interactive community forum component with Neumorphism design style, suitable for business/corporate websites, supporting both light and dark themes.

Open Preview

                <div class="container mx-auto px-4">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">Community Forum</h2>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 mb-8">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Recent Discussions</h3>
        <ul class="mt-4">
            <li class="flex items-start bg-gray-50 dark:bg-gray-700 rounded-lg p-4 mb-4 shadow-lg transition-shadow duration-300 hover:shadow-2xl">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
                <div>
                    <h4 class="text-lg font-medium text-gray-800 dark:text-gray-200">John Doe</h4>
                    <p class="text-gray-600 dark:text-gray-400">What are the benefits of using Neumorphism in UI design?</p>
                    <span class="text-sm text-gray-500 dark:text-gray-300">2 hours ago</span>
                </div>
            </li>
            <li class="flex items-start bg-gray-50 dark:bg-gray-700 rounded-lg p-4 mb-4 shadow-lg transition-shadow duration-300 hover:shadow-2xl">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
                <div>
                    <h4 class="text-lg font-medium text-gray-800 dark:text-gray-200">Jane Smith</h4>
                    <p class="text-gray-600 dark:text-gray-400">How to create responsive designs with Tailwind CSS?</p>
                    <span class="text-sm text-gray-500 dark:text-gray-300">5 hours ago</span>
                </div>
            </li>
            <li class="flex items-start bg-gray-50 dark:bg-gray-700 rounded-lg p-4 mb-4 shadow-lg transition-shadow duration-300 hover:shadow-2xl">
                <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
                <div>
                    <h4 class="text-lg font-medium text-gray-800 dark:text-gray-200">Alex Johnson</h4>
                    <p class="text-gray-600 dark:text-gray-400">What are the key features of a modern forum?</p>
                    <span class="text-sm text-gray-500 dark:text-gray-300">1 day ago</span>
                </div>
            </li>
        </ul>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Create a New Discussion</h3>
        <form class="mt-4">
            <input type="text" placeholder="Title" class="border border-gray-300 rounded-lg p-2 w-full mb-4 bg-gray-100 dark:bg-gray-600 dark:border-gray-700"> 
            <textarea rows="4" placeholder="Write your message..." class="border border-gray-300 rounded-lg p-2 w-full mb-4 bg-gray-100 dark:bg-gray-600 dark:border-gray-700"></textarea>
            <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white font-semibold rounded-lg px-4 py-2">Post</button>
        </form>
    </div>
</div>

Community Forum Component

A simple community forum component with a pastel color scheme, Material Design influences, and dark mode support. Features a responsive layout for blog/content consumption.

Open Preview

                <div class="container mx-auto p-4 md:p-8 font-sans"><div class="grid grid-cols-1 md:grid-cols-3 gap-6"><div class="md:col-span-2"><div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 mb-6"><h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Community Discussions</h2><div class="space-y-4"><div class="flex items-center border-b border-gray-200 dark:border-gray-700 pb-4"><img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar"><div class="flex-1"><h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">How to use Tailwind CSS?</h3><p class="text-gray-500 dark:text-gray-400 text-sm">Posted by John Doe <span>&#8226;</span> 2 hours ago</p></div><span class="text-gray-600 dark:text-gray-400 text-sm">15 Replies</span></div><div class="flex items-center border-b border-gray-200 dark:border-gray-700 pb-4"><img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar"><div class="flex-1"><h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Best practices for responsive design?</h3><p class="text-gray-500 dark:text-gray-400 text-sm">Posted by Jane Smith <span>&#8226;</span> 5 hours ago</p></div><span class="text-gray-600 dark:text-gray-400 text-sm">22 Replies</span></div><div class="flex items-center pb-4"><img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/19.jpg" alt="Avatar"><div class="flex-1"><h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Integrating dark mode with Tailwind</h3><p class="text-gray-500 dark:text-gray-400 text-sm">Posted by Peter Jones <span>&#8226;</span> 1 day ago</p></div><span class="text-gray-600 dark:text-gray-400 text-sm">8 Replies</span></div></div></div></div><div class="md:col-span-1"><div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6"><h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Popular Tags</h2><div class="flex flex-wrap gap-2"><span class="px-3 py-1 bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-200 text-sm font-semibold rounded-full">Tailwind CSS</span><span class="px-3 py-1 bg-green-200 dark:bg-green-700 text-green-800 dark:text-green-200 text-sm font-semibold rounded-full">Responsive Design</span><span class="px-3 py-1 bg-yellow-200 dark:bg-yellow-700 text-yellow-800 dark:text-yellow-200 text-sm font-semibold rounded-full">Dark Mode</span><span class="px-3 py-1 bg-purple-200 dark:bg-purple-700 text-purple-800 dark:text-purple-200 text-sm font-semibold rounded-full">Web Development</span></div></div></div></div></div>

Community Forum Component

A simple, brutalist community forum component in grayscale for social media, with responsive design and dark mode support.

Open Preview

                <div class="bg-white dark:bg-black text-black dark:text-white min-h-screen p-4">
  <div class="container mx-auto">
    <h1 class="text-2xl font-bold mb-4 text-center">Community Forum</h1>
    <div class="space-y-4">
      <!-- Forum Post -->
      <div class="border border-black dark:border-white p-4">
        <div class="flex items-center mb-2">
          <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2 border border-black dark:border-white">
          <p class="font-bold">User One</p>
        </div>
        <p class="mb-2">This is a sample forum post content.</p>
        <div class="flex justify-between text-sm text-gray-600 dark:text-gray-400">
          <span>Posted on: 2023-10-27</span>
          <span>Replies: 5</span>
        </div>
      </div>

      <!-- Forum Post -->
      <div class="border border-black dark:border-white p-4">
        <div class="flex items-center mb-2">
          <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2 border border-black dark:border-white">
          <p class="font-bold">User Two</p>
        </div>
        <p class="mb-2">Another example forum post here.</p>
        <div class="flex justify-between text-sm text-gray-600 dark:text-gray-400">
          <span>Posted on: 2023-10-27</span>
          <span>Replies: 10</span>
        </div>
      </div>

       <!-- Forum Post -->
      <div class="border border-black dark:border-white p-4">
        <div class="flex items-center mb-2">
          <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2 border border-black dark:border-white">
          <p class="font-bold">User Three</p>
        </div>
        <p class="mb-2">Yet another example forum post to fill the space.</p>
        <div class="flex justify-between text-sm text-gray-600 dark:text-gray-400">
          <span>Posted on: 2023-10-27</span>
          <span>Replies: 2</span>
        </div>
      </div>
    </div>
  </div>
</div>

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.

Open Preview

                <div class="container mx-auto p-4 antialiased text-gray-800 dark:text-gray-200">
  <div class="relative flex flex-col min-w-0 mb-6 break-words bg-gray-200 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark rounded-lg">
    <div class="px-6 py-5">
      <div class="text-center">
        <h3 class="mb-1 text-xl font-bold">Community Forum</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400">Discuss and share with the community</p>
      </div>
    </div>
    <div class="flex-auto p-6">
      <div class="relative w-full">
        <input type="text" placeholder="Search topics..." class="px-3 py-3 placeholder-gray-600 dark:placeholder-gray-400 text-gray-800 dark:text-gray-200 relative bg-gray-300 dark:bg-gray-700 rounded text-sm shadow-neumorphic-input-light dark:shadow-neumorphic-input-dark outline-none border-none focus:outline-none focus:shadow-outline w-full pr-10">
        <span class="z-10 h-full leading-snug font-normal absolute text-center text-gray-600 dark:text-gray-400 bg-transparent rounded text-base items-center justify-center w-8 right-0 pr-3 py-3">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
          </svg>
        </span>
      </div>
      <div class="mt-6">
        <div class="flex items-center justify-between mb-4">
          <h4 class="text-md font-semibold">Recent Discussions</h4>
          <a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:underline">View All</a>
        </div>
        <ul class="list-none">
          <li class="px-4 py-3 mb-3 bg-gray-300 dark:bg-gray-700 shadow-neumorphic-item-light dark:shadow-neumorphic-item-dark rounded-lg">
            <div class="flex items-center">
              <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="..." class="w-8 h-8 rounded-full mr-3">
              <div>
                <p class="text-sm font-semibold">Discussion Topic 1</p>
                <span class="text-xs text-gray-600 dark:text-gray-400">Started by John Doe</span>
              </div>
            </div>
          </li>
          <li class="px-4 py-3 mb-3 bg-gray-300 dark:bg-gray-700 shadow-neumorphic-item-light dark:shadow-neumorphic-item-dark rounded-lg">
            <div class="flex items-center">
              <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="..." class="w-8 h-8 rounded-full mr-3">
              <div>
                <p class="text-sm font-semibold">Discussion Topic 2</p>
                <span class="text-xs text-gray-600 dark:text-gray-400">Started by Jane Smith</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

<style>
.shadow-neumorphic-light {
  box-shadow: 7px 7px 14px #bebebe, -7px -7px 14px #ffffff;
}
.shadow-neumorphic-dark {
  box-shadow: 7px 7px 14px #717171, -7px -7px 14px #8f8f8f;
}
.shadow-neumorphic-input-light {
    box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff;
}
.shadow-neumorphic-input-dark {
    box-shadow: inset 5px 5px 10px #717171, inset -5px -5px 10px #8f8f8f;
}
.shadow-neumorphic-item-light {
    box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
}
.shadow-neumorphic-item-dark {
    box-shadow: 5px 5px 10px #717171, -5px -5px 10px #8f8f8f;
}
</style>

Community Forum Component

A responsive community forum component designed with Material Design principles, suitable for blog and content consumption. It features a grid layout, interactive elements, and supports dark themes using Tailwind CSS.

Open Preview

                <div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-lg shadow-md">
  <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Community Forum</h1>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
      <img src="https://picsum.photos/200/100" alt="Post Image" class="rounded-t-lg">
      <div class="p-4">
        <div class="flex items-center mb-2">
          <img src="https://randomuser.me/api/portraits/men/10.jpg" class="w-8 h-8 rounded-full mr-2" alt="User Avatar">
          <span class="font-semibold text-gray-700 dark:text-gray-200">John Doe</span>
        </div>
        <h2 class="font-bold text-lg text-gray-800 dark:text-gray-100 mb-2">Understanding Material Design</h2>
        <p class="text-gray-600 dark:text-gray-300">This post discusses the key principles of Material Design and how to implement them effectively using Tailwind CSS.</p>
        <div class="mt-4">
          <a href="#" class="text-blue-500 hover:text-blue-700 dark:hover:text-blue-400">Read More</a>
        </div>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
      <img src="https://picsum.photos/200/101" alt="Post Image" class="rounded-t-lg">
      <div class="p-4">
        <div class="flex items-center mb-2">
          <img src="https://randomuser.me/api/portraits/women/10.jpg" class="w-8 h-8 rounded-full mr-2" alt="User Avatar">
          <span class="font-semibold text-gray-700 dark:text-gray-200">Jane Smith</span>
        </div>
        <h2 class="font-bold text-lg text-gray-800 dark:text-gray-100 mb-2">Tailwind CSS for Beginners</h2>
        <p class="text-gray-600 dark:text-gray-300">A beginner's guide to Tailwind CSS, exploring its utility-first approach and customization options.</p>
        <div class="mt-4">
          <a href="#" class="text-blue-500 hover:text-blue-700 dark:hover:text-blue-400">Read More</a>
        </div>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
      <img src="https://picsum.photos/200/102" alt="Post Image" class="rounded-t-lg">
      <div class="p-4">
        <div class="flex items-center mb-2">
          <img src="https://randomuser.me/api/portraits/men/20.jpg" class="w-8 h-8 rounded-full mr-2" alt="User Avatar">
          <span class="font-semibold text-gray-700 dark:text-gray-200">Michael Johnson</span>
        </div>
        <h2 class="font-bold text-lg text-gray-800 dark:text-gray-100 mb-2">Accessibility in Design</h2>
        <p class="text-gray-600 dark:text-gray-300">Exploring the importance of accessibility in design and how to ensure your designs are inclusive.</p>
        <div class="mt-4">
          <a href="#" class="text-blue-500 hover:text-blue-700 dark:hover:text-blue-400">Read More</a>
        </div>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
      <img src="https://picsum.photos/200/103" alt="Post Image" class="rounded-t-lg">
      <div class="p-4">
        <div class="flex items-center mb-2">
          <img src="https://randomuser.me/api/portraits/women/20.jpg" class="w-8 h-8 rounded-full mr-2" alt="User Avatar">
          <span class="font-semibold text-gray-700 dark:text-gray-200">Emily Davis</span>
        </div>
        <h2 class="font-bold text-lg text-gray-800 dark:text-gray-100 mb-2">Responsive Web Design</h2>
        <p class="text-gray-600 dark:text-gray-300">Learn how to create responsive web designs that adapt to different screen sizes and devices.</p>
        <div class="mt-4">
          <a href="#" class="text-blue-500 hover:text-blue-700 dark:hover:text-blue-400">Read More</a>
        </div>
      </div>
    </div>
  </div>
</div>