Komponenten suchen

Kategorien

Komponenten Community-Forum

Community-Forum

Diskussionsforum für die Interaktion mit der Community

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.

Offen Vorschau

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

Offen Vorschau

                <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-Komponente

Eine Community-Forum-Komponente, die im Brutalismus-Stil mit einem lebendigen Farbschema gestaltet ist und sich für E-Commerce-Erlebnisse eignet. Es enthält eine Vielzahl interaktiver Elemente wie Beiträge, Kommentare und Benutzerprofile, die alle mit Tailwind CSS für ein responsives Design mit Unterstützung für dunkle Themen gestaltet sind.

Offen Vorschau

                <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-Komponente

Eine reaktionsschnelle Community-Forum-Komponente, die im Glassmorphism-Stil mit Erdtönen gestaltet ist und für Social-Media-Plattformen geeignet ist. Es verfügt über einen Milchglaseffekt und ist mit dem Dunkelmodus kompatibel.

Offen Vorschau

                <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-Komponente

Eine reaktionsschnelle und interaktive Community-Forenkomponente im Neumorphism-Designstil, die für Geschäfts-/Unternehmenswebsites geeignet ist und sowohl helle als auch dunkle Themen unterstützt.

Offen Vorschau

                <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-Komponente

Eine einfache Community-Forenkomponente mit einem pastellfarbenen Farbschema, Material Design-Einflüssen und Unterstützung für den Dunkelmodus. Verfügt über ein responsives Layout für den Konsum von Blogs / Inhalten.

Offen Vorschau

                <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-Komponente

Eine einfache, brutalistische Community-Forenkomponente in Graustufen für soziale Medien mit responsivem Design und Unterstützung für den Dunkelmodus.

Offen Vorschau

                <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-Komponente

Community-Forum-Komponente mit Neumorphism-Design, Graustufen-Farbschema und einfacher Komplexität für Social Media mit Tailwind CSS. Responsives Design mit Unterstützung für dunkle Themen.

Offen Vorschau

                <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-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.

Offen Vorschau

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

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.

Offen Vorschau

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-4xl mx-auto mt-10">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Community Forum</h2>
    <div class="mb-4">
        <h3 class="text-xl font-medium text-gray-700 dark:text-gray-300">Latest Discussions</h3>
        <ul class="list-disc list-inside space-y-3 mt-2">
            <li class="p-4 bg-gray-100 dark:bg-gray-700 rounded-md shadow border border-gray-200 dark:border-gray-600">
                <div class="flex items-center">
                    <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User 1">
                    <div>
                        <p class="text-gray-800 dark:text-white font-bold">John Doe</p>
                        <p class="text-gray-600 dark:text-gray-400 text-sm">What are your thoughts on the new features?</p>
                    </div>
                </div>
                <span class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</span>
            </li>
            <li class="p-4 bg-gray-100 dark:bg-gray-700 rounded-md shadow border border-gray-200 dark:border-gray-600">
                <div class="flex items-center">
                    <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/32.jpg" alt="User 2">
                    <div>
                        <p class="text-gray-800 dark:text-white font-bold">Jane Smith</p>
                        <p class="text-gray-600 dark:text-gray-400 text-sm">Can someone recommend a good blog to follow?</p>
                    </div>
                </div>
                <span class="text-sm text-gray-500 dark:text-gray-400">3 hours ago</span>
            </li>
        </ul>
    </div>
    <div class="mt-6">
        <h3 class="text-xl font-medium text-gray-700 dark:text-gray-300">Create a new topic</h3>
        <form class="mt-4">
            <textarea class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md" rows="4" placeholder="What's on your mind?"></textarea>
            <button class="mt-2 bg-green-500 hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700 text-white font-semibold py-2 px-4 rounded-lg focus:outline-none" type="submit">Post</button>
        </form>
    </div>
</div>