社区论坛组件
以粗野主义风格设计的社区论坛组件，具有鲜艳的配色方案，适用于电子商务体验。它包括各种交互式元素，如帖子、评论和用户配置文件，所有这些元素都使用 Tailwind CSS 设置样式，以实现具有深色主题支持的响应式设计。
HTML 代码
<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>