Komponenten suchen

Kategorien

Komponenten Community-Forum

Community-Forum

Diskussionsforum für die Interaktion mit der Community

Community-Forum-Komponente

Eine Retro-/Vintage-Community-Forum-Komponente für den E-Commerce mit einem lebendigen Farbschema. Responsives Design mit Unterstützung für dunkle Themen.

Offen Vorschau

                <div class="bg-gray-200 dark:bg-gray-800 min-h-screen p-8 font-sans">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden">
    <div class="bg-yellow-400 dark:bg-yellow-600 p-6">
      <h1 class="text-2xl font-bold text-gray-800 dark:text-white">Community Forum</h1>
    </div>
    <div class="p-6">
      <div class="flex items-center mb-6">
        <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
        <textarea class="flex-grow p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400 dark:bg-gray-700 dark:border-gray-600 dark:text-white" rows="3" placeholder="Share your thoughts..."></textarea>
      </div>
      <button class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded-lg transition duration-300">New Post</button>

      <div class="mt-8 space-y-6">
        <div class="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg shadow">
          <div class="flex items-center mb-4">
            <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
            <div>
              <h3 class="font-semibold text-gray-800 dark:text-white">Sarah Johnson</h3>
              <p class="text-sm text-gray-600 dark:text-gray-400">2 hours ago</p>
            </div>
          </div>
          <p class="text-gray-700 dark:text-gray-300">Just received my order and I'm loving the quality!</p>
          <div class="flex justify-end mt-4">
            <button class="text-blue-500 hover:underline text-sm mr-4">Reply</button>
            <button class="text-red-500 hover:underline text-sm">Report</button>
          </div>
        </div>

        <div class="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg shadow">
          <div class="flex items-center mb-4">
            <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar">
            <div>
              <h3 class="font-semibold text-gray-800 dark:text-white">Michael Chen</h3>
              <p class="text-sm text-gray-600 dark:text-gray-400">1 day ago</p>
            </div>
          </div>
          <p class="text-gray-700 dark:text-gray-300">Are there any discounts available for loyal customers?</p>
          <div class="flex justify-end mt-4">
            <button class="text-blue-500 hover:underline text-sm mr-4">Reply</button>
            <button class="text-red-500 hover:underline text-sm">Report</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Community-Forum-Komponente

Eine Community-Forum-Komponente im Retro-/Vintage-Designstil mit responsiven Effekten und Unterstützung für dunkle Themen mit Tailwind CSS.

Offen Vorschau

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md max-w-4xl mx-auto">
    <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-gray-100 mb-4">Community Forum</h2>
    <div class="overflow-y-auto h-96">
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg mb-4 shadow">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
                <div>
                    <h3 class="font-semibold text-gray-800 dark:text-gray-100">John Doe</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Posted on January 5, 2023</p>
                </div>
            </div>
            <p class="text-gray-700 dark:text-gray-300 text-lg">What are your favorite retro games? I miss playing on my old console!</p>
            <img src="https://picsum.photos/400/200?random=1" alt="Random Image" class="mt-4 rounded-lg shadow">
        </div>
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg mb-4 shadow">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
                <div>
                    <h3 class="font-semibold text-gray-800 dark:text-gray-100">Jane Smith</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Posted on January 6, 2023</p>
                </div>
            </div>
            <p class="text-gray-700 dark:text-gray-300 text-lg">I loved Sonic the Hedgehog on Sega! It was the best part of my childhood.</p>
            <img src="https://picsum.photos/400/200?random=2" alt="Random Image" class="mt-4 rounded-lg shadow">
        </div>
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg mb-4 shadow">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/men/34.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
                <div>
                    <h3 class="font-semibold text-gray-800 dark:text-gray-100">Chris Johnson</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Posted on January 7, 2023</p>
                </div>
            </div>
            <p class="text-gray-700 dark:text-gray-300 text-lg">Anyone remembers playing Mario Kart? Those were legendary gaming nights!</p>
            <img src="https://picsum.photos/400/200?random=3" alt="Random Image" class="mt-4 rounded-lg shadow">
        </div>
    </div>
    <div class="mt-4">
        <textarea class="w-full p-3 border-2 border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:border-blue-500 dark:focus:border-blue-400 mb-2" rows="3" placeholder="Join the conversation..."></textarea>
        <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-lg">Post</button>
    </div>
</div>

Eine reaktionsschnelle Community-Forum-Komponente, die im Dunkelmodus mit Tailwind CSS formatiert ist. Die Komponente verfügt über einen dunklen Hintergrund, um die Belastung der Augen zu reduzieren, und enthält Platzhalterbilder für Avatare und Forenbeiträge.

Offen Vorschau

                <div class="bg-gray-900 text-white p-6 rounded-lg shadow-lg max-w-3xl mx-auto">
    <h2 class="text-2xl font-bold mb-4">Community Forum</h2>
    <div class="mb-4">
        <h3 class="text-xl font-semibold">Latest Discussions</h3>
        <div class="mt-4">
            <div class="bg-gray-800 p-4 rounded-lg mb-4">
                <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 mr-3">
                    <div>
                        <h4 class="font-semibold">John Doe</h4>
                        <span class="text-gray-400 text-sm">2 hours ago</span>
                    </div>
                </div>
                <p class="text-gray-300">What are the best practices for learning JavaScript?</p>
                <div class="flex justify-between mt-2">
                    <span class="text-gray-400">5 replies</span>
                    <span class="text-gray-400">10 likes</span>
                </div>
            </div>
            <div class="bg-gray-800 p-4 rounded-lg mb-4">
                <div class="flex items-center mb-2">
                    <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
                    <div>
                        <h4 class="font-semibold">Jane Smith</h4>
                        <span class="text-gray-400 text-sm">3 hours ago</span>
                    </div>
                </div>
                <p class="text-gray-300">Any recommendations for a good code editor?</p>
                <div class="flex justify-between mt-2">
                    <span class="text-gray-400">2 replies</span>
                    <span class="text-gray-400">5 likes</span>
                </div>
            </div>
        </div>
    </div>
    <div class="mb-4">
        <h3 class="text-xl font-semibold">Join the Conversation</h3>
        <form class="mt-4 space-y-4">
            <textarea class="w-full p-2 rounded-lg bg-gray-800 text-white placeholder-gray-400 resize-none" rows="4" placeholder="Share your thoughts..."></textarea>
            <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Post</button>
        </form>
    </div>
    <div class="bg-gray-800 p-4 rounded-lg mt-4">
        <h3 class="text-xl font-semibold mb-2">Popular Topics</h3>
        <ul class="space-y-2">
            <li class="bg-gray-700 p-2 rounded">#JavaScript</li>
            <li class="bg-gray-700 p-2 rounded">#React</li>
            <li class="bg-gray-700 p-2 rounded">#TailwindCSS</li>
            <li class="bg-gray-700 p-2 rounded">#NodeJS</li>
            <li class="bg-gray-700 p-2 rounded">#WebDevelopment</li>
        </ul>
    </div>
</div>

Community-Forum-Komponente

Eine Community-Forum-Komponente, die mit skeuomorphen Elementen gestaltet wurde, mit responsivem Design, Unterstützung für dunkle Themen sowie Avatar- und Platzhalterbildern.

Offen Vorschau

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-4xl mx-auto">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Community Forum</h1>
    <div class="border-b border-gray-300 dark:border-gray-600 mb-4 pb-2">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Latest Discussions</h2>
    </div>
    <div class="flex items-start mb-4 p-4 border border-gray-300 dark:border-gray-600 rounded-lg transition-shadow hover:shadow-lg">
        <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <div>
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">John Doe</h3>
            <p class="text-gray-600 dark:text-gray-400">What’s the best way to learn Tailwind CSS?</p>
            <span class="text-gray-500 dark:text-gray-300 text-sm">5 comments - 2 hours ago</span>
        </div>
    </div>
    <div class="flex items-start mb-4 p-4 border border-gray-300 dark:border-gray-600 rounded-lg transition-shadow hover:shadow-lg">
        <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
        <div>
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Jane Smith</h3>
            <p class="text-gray-600 dark:text-gray-400">Can someone explain the flexbox model?</p>
            <span class="text-gray-500 dark:text-gray-300 text-sm">3 comments - 1 hour ago</span>
        </div>
    </div>
    <div class="flex items-start mb-4 p-4 border border-gray-300 dark:border-gray-600 rounded-lg transition-shadow hover:shadow-lg">
        <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
        <div>
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Mark Johnson</h3>
            <p class="text-gray-600 dark:text-gray-400">Tailwind vs Bootstrap: Which one to choose?</p>
            <span class="text-gray-500 dark:text-gray-300 text-sm">8 comments - 30 minutes ago</span>
        </div>
    </div>
    <div class="mt-6">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Join the discussion!</h2>
        <textarea class="mt-2 w-full h-24 p-4 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" placeholder="Type your message here..."></textarea>
        <button class="mt-2 bg-blue-500 dark:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg hover:bg-blue-600 dark:hover:bg-blue-800 transition-all">Post</button>
    </div>
</div>

Community-Forum-Komponente

Eine reaktionsschnelle Community-Forum-Komponente, die nach Material Design-Prinzipien unter Verwendung von Tailwind CSS entwickelt wurde, mit Unterstützung für dunkle Designs und Platzhalterbildern.

Offen Vorschau

                <div class="container mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Community Forum</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md p-4">
            <div class="flex items-center mb-4">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
                <h3 class="text-lg font-medium text-gray-800 dark:text-white">John Doe</h3>
            </div>
            <p class="text-gray-700 dark:text-gray-300">This is a great place to discuss various topics and share ideas with others. Feel free to start a conversation!</p>
            <img src="https://picsum.photos/400/200" alt="Community Discussion" class="rounded-lg shadow mt-2">
            <div class="mt-3">
                <span class="text-gray-500 dark:text-gray-400 text-sm">Posted on January 1, 2023</span>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md p-4">
            <div class="flex items-center mb-4">
                <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
                <h3 class="text-lg font-medium text-gray-800 dark:text-white">Jane Smith</h3>
            </div>
            <p class="text-gray-700 dark:text-gray-300">I love the community here! Everyone is so friendly and welcoming. Looking forward to more discussions.</p>
            <img src="https://picsum.photos/400/201" alt="Community Discussion" class="rounded-lg shadow mt-2">
            <div class="mt-3">
                <span class="text-gray-500 dark:text-gray-400 text-sm">Posted on January 2, 2023</span>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <h4 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Join the Conversation</h4>
        <textarea class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md" rows="4" placeholder="Share your thoughts..."></textarea>
        <button class="mt-2 bg-blue-500 text-white rounded-md px-4 py-2 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Post</button>
    </div>
</div>

Community-Forum-Komponente

Eine Community-Forum-Komponente im Neumorphismus-Stil mit Avataren, Threads und einem dunklen Thema.

Offen Vorschau

                <div class="bg-gray-100 dark:bg-gray-800 py-8 px-4 rounded-lg shadow-lg max-w-4xl mx-auto">
    <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Community Forum</h1>
    <div class="flex flex-col space-y-4">
        <div class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition-shadow hover:shadow-xl">
            <div class="flex items-center mb-3">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
                <h2 class="font-semibold text-gray-900 dark:text-white">John Doe</h2>
                <span class="text-gray-500 dark:text-gray-400 text-sm ml-auto">2 hours ago</span>
            </div>
            <p class="text-gray-700 dark:text-gray-300">What do you think about the latest updates in our community?</p>
            <div class="flex justify-between items-center mt-4">
                <button class="text-blue-500 hover:underline">Reply</button>
                <span class="text-gray-500 dark:text-gray-400 text-sm">10 replies</span>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition-shadow hover:shadow-xl">
            <div class="flex items-center mb-3">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
                <h2 class="font-semibold text-gray-900 dark:text-white">Jane Smith</h2>
                <span class="text-gray-500 dark:text-gray-400 text-sm ml-auto">1 hour ago</span>
            </div>
            <p class="text-gray-700 dark:text-gray-300">I love the new features! They really enhance the user experience.</p>
            <div class="flex justify-between items-center mt-4">
                <button class="text-blue-500 hover:underline">Reply</button>
                <span class="text-gray-500 dark:text-gray-400 text-sm">5 replies</span>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition-shadow hover:shadow-xl">
            <div class="flex items-center mb-3">
                <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
                <h2 class="font-semibold text-gray-900 dark:text-white">Michael Lee</h2>
                <span class="text-gray-500 dark:text-gray-400 text-sm ml-auto">30 minutes ago</span>
            </div>
            <p class="text-gray-700 dark:text-gray-300">Can someone explain the upcoming changes in moderation?</p>
            <div class="flex justify-between items-center mt-4">
                <button class="text-blue-500 hover:underline">Reply</button>
                <span class="text-gray-500 dark:text-gray-400 text-sm">2 replies</span>
            </div>
        </div>
    </div>
</div>

Community-Forum Komponente 9

Eine Community-Forum-Komponente mit einem Glasmorphismus-Design mit mattglasähnlichen, durchscheinenden Elementen, responsiven Effekten und Unterstützung für dunkle Themen.

Offen Vorschau

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center">
    <div class="bg-white dark:bg-gray-800 backdrop-filter backdrop-blur-lg opacity-80 rounded-lg shadow-lg p-6 max-w-lg w-full">
        <h1 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Community Forum</h1>
        <div class="space-y-4">
            <div class="flex items-center space-x-2 bg-white dark:bg-gray-700 p-4 rounded-lg shadow">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-10 h-10">
                <div>
                    <h2 class="text-gray-800 dark:text-white font-bold">John Doe</h2>
                    <p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
            <div class="flex items-center space-x-2 bg-white dark:bg-gray-700 p-4 rounded-lg shadow">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="rounded-full w-10 h-10">
                <div>
                    <h2 class="text-gray-800 dark:text-white font-bold">Jane Smith</h2>
                    <p class="text-gray-600 dark:text-gray-300">Vivamus laoreet dolor eget lectus tincidunt, et facilisis erat laoreet.</p>
                </div>
            </div>
            <div class="flex items-center space-x-2 bg-white dark:bg-gray-700 p-4 rounded-lg shadow">
                <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="rounded-full w-10 h-10">
                <div>
                    <h2 class="text-gray-800 dark:text-white font-bold">Alex Johnson</h2>
                    <p class="text-gray-600 dark:text-gray-300">Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</p>
                </div>
            </div>
        </div>
        <div class="mt-4">
            <textarea class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white" rows="4" placeholder="Write your message..."></textarea>
            <button class="mt-2 w-full bg-blue-500 dark:bg-blue-600 text-white rounded-lg py-2 hover:bg-blue-600 dark:hover:bg-blue-700 transition">Post Message</button>
        </div>
    </div>
</div>