Komponenten Community-Forum Community-Forum-Komponente

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.

Vorschau

HTML-Code

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

Verwandte Komponenten

Community-Forum-Komponente

Eine einfache neumorphe Community-Forum-Komponente für den E-Commerce, die ein triadisches Farbschema verwendet, mit responsivem Design und Unterstützung für dunkle Themen.

Offen

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

Community-Forum-Komponente

Eine reaktionsschnelle Community-Forenkomponente für das Finanz-/Bankwesen mit einem Material Design-Stil und einem Bonbon-/Süß-Farbschema mit leuchtenden Farben wie Bubblegum-Pink und Mintgrün, Unterstützung für den Dunkelmodus und semantischem HTML.

Offen