Community Forum

Community Forum Component

A simple community forum component utilizing Material Design principles, tailored for blog content consumption with Earth tones color scheme, and responsive design for dark mode support.

Open Preview

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

Community Forum Component

A retro/vintage Community Forum Component for e-commerce with a vibrant color scheme. Responsive design with dark theme support.

Open Preview

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

A Community Forum Component with a retro/vintage design style, featuring responsive effects and dark theme support using Tailwind CSS.

Open Preview

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

A responsive Community Forum Component styled in dark mode using Tailwind CSS. The component features a dark background to reduce eye strain and includes placeholder images for avatars and forum posts.

Open Preview

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

A community forum component designed with skeuomorphic elements, featuring responsive design, dark theme support, and avatar and placeholder images.

Open Preview

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

A responsive Community Forum component designed with Material Design principles using Tailwind CSS, featuring dark theme support and placeholder images.

Open Preview

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

A Neumorphism style Community Forum Component with avatars, threads, and a dark theme.

Open Preview

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

A Community Forum component featuring a glassmorphism design with frosted glass-like translucent elements, responsive effects, and dark theme support.

Open Preview

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

Categories