Rechercher des composants

Catégories

Composants Forum communautaire

Forum communautaire

Forum de discussion pour l’interaction avec la communauté

Composante du Forum communautaire brutaliste

Un composant de forum communautaire de style brutaliste pour les interfaces de médias sociaux avec des couleurs vives, une complexité modérée et une prise en charge du mode sombre. Comprend une liste de messages sur le forum avec une typographie audacieuse, des éléments très contrastés et des mises en page asymétriques typiques du design brutaliste. Comprend des articles de publication avec des avatars d’utilisateurs, des boutons d’interaction et une esthétique brute et intentionnellement grossière avec des accents de couleurs vives.

Ouvrir Aperçu

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

Volet Forum communautaire

Composant du forum communautaire avec conception Glassmorphism, palette de couleurs vives, niveau de complexité complexe, à des fins de blog/contenu, conception réactive avec prise en charge du thème sombre, utilisation de Tailwind CSS.

Ouvrir Aperçu

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

Volet Forum communautaire

Un composant de forum communautaire conçu dans le style brutalisme avec une palette de couleurs vives, adapté aux expériences de commerce électronique. Il comprend une variété d’éléments interactifs tels que des publications, des commentaires et des profils d’utilisateurs, tous stylisés avec Tailwind CSS pour un design réactif avec prise en charge du thème sombre.

Ouvrir Aperçu

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

Volet Forum communautaire

Un composant de forum communautaire réactif conçu dans le style Glassmorphism avec des tons de terre, adapté aux plateformes de médias sociaux. Il présente un effet de verre dépoli et est compatible avec le mode sombre.

Ouvrir Aperçu

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

Volet Forum communautaire

Un composant de forum communautaire réactif et interactif avec le style de conception Neumorphism, adapté aux sites Web d’entreprise/d’entreprise, prenant en charge les thèmes clairs et sombres.

Ouvrir Aperçu

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

Volet Forum communautaire

Il s’agit d’un composant simple du forum communautaire avec une palette de couleurs pastel, des influences Material Design et la prise en charge du mode sombre. Dispose d’une mise en page réactive pour la consommation de blog/contenu.

Ouvrir Aperçu

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

Volet Forum communautaire

Un composant de forum communautaire simple et brutaliste en niveaux de gris pour les médias sociaux, avec un design réactif et une prise en charge du mode sombre.

Ouvrir Aperçu

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

Volet Forum communautaire

Composant du forum communautaire avec conception Neumorphism, schéma de couleurs en niveaux de gris et complexité simple pour les médias sociaux à l’aide de Tailwind CSS. Conception réactive avec prise en charge du thème sombre.

Ouvrir Aperçu

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

Volet Forum communautaire

Un composant de forum communautaire réactif conçu selon les principes de Material Design, adapté à la consommation de blogs et de contenu. Il dispose d’une disposition en grille, d’éléments interactifs et prend en charge les thèmes sombres à l’aide de Tailwind CSS.

Ouvrir Aperçu

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

Volet Forum communautaire

Il s’agit d’un composant simple de forum communautaire utilisant les principes de conception matérielle, conçu pour la consommation de contenu de blog avec une palette de couleurs Earth Tones et une conception réactive pour la prise en charge du mode sombre.

Ouvrir Aperçu

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