Community Forum Component

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