CCHub Logo CCHub Tailwind Collection
Komponenten Community-Forum Community-Forum-Komponente

Community-Forum-Komponente

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

Vorschau

HTML-Code 

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

Verwandte Komponenten

Community-Forum-Komponente

Eine Community-Forum-Komponente mit Skeuomorphismus-Design, triadischem Farbschema und einfacher Komplexität für Social-Media-Zwecke, erstellt mit Tailwind CSS. Beinhaltet Responsive Design und Unterstützung für dunkle Themen.

Offen

Community-Forum-Komponente - Retro Ocean Blue

Eine einfache, reaktionsschnelle Community-Forenkomponente mit einem Retro-Vibe der 80er/90er Jahre, die für Job- und Karriereplattformen entwickelt wurde. Mit ozeanblauem Farbschema und Unterstützung für den Dunkelmodus.

Offen

Community-Forum-Komponente

Eine Community-Forenkomponente im Neumorphism-Stil für ein Portfolio mit einem pastellfarbenen Farbschema und einem komplexen, responsiven Design mit Unterstützung für dunkle Themen. Es enthält eine Forenliste, aktuelle Aktivitäten und Benutzerprofile, die alle mit Tailwind CSS ohne JavaScript implementiert wurden.

Offen