Community Forum Component

<div class="min-h-screen bg-stone-100 dark:bg-stone-900 p-4 flex flex-col items-center justify-center">
  <div class="w-full max-w-2xl bg-white dark:bg-stone-800 rounded-lg shadow-md p-6">
    <h1 class="text-2xl font-semibold text-stone-800 dark:text-stone-200 mb-6 text-center">Community Forum</h1>

    <!-- New Post Section -->
    <div class="mb-6">
      <textarea class="w-full p-3 rounded-md bg-stone-50 dark:bg-stone-700 text-stone-700 dark:text-stone-300 border border-stone-300 dark:border-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-400" rows="3" placeholder="Write a new post..."></textarea>
      <div class="flex justify-end mt-2">
        <button class="px-4 py-2 bg-stone-600 text-white rounded-md hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-stone-500">Post</button>
      </div>
    </div>

    <!-- Forum Posts -->
    <div class="space-y-4">
      <!-- Post 1 -->
      <div class="bg-stone-50 dark:bg-stone-700 p-4 rounded-lg shadow-sm">
        <div class="flex items-center mb-3">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-stone-300 dark:border-stone-600">
          <div>
            <p class="font-semibold text-stone-800 dark:text-stone-200">John Doe</p>
            <p class="text-sm text-stone-500 dark:text-stone-400">2 hours ago</p>
          </div>
        </div>
        <p class="text-stone-700 dark:text-stone-300 mb-3">This is a great community! I just wanted to share my latest project. Feedback is welcome!</p>
        <div class="flex justify-between text-stone-500 dark:text-stone-400 text-sm">
          <span>5 Likes</span>
          <span>3 Comments</span>
        </div>
      </div>

      <!-- Post 2 -->
      <div class="bg-stone-50 dark:bg-stone-700 p-4 rounded-lg shadow-sm">
        <div class="flex items-center mb-3">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-stone-300 dark:border-stone-600">
          <div>
            <p class="font-semibold text-stone-800 dark:text-stone-200">Jane Smith</p>
            <p class="text-sm text-stone-500 dark:text-stone-400">Yesterday</p>
          </div>
        </div>
        <p class="text-stone-700 dark:text-stone-300 mb-3">Looking for collaborators on an exciting new open-source project. Anyone interested in web development?</p>
        <div class="flex justify-between text-stone-500 dark:text-stone-400 text-sm">
          <span>12 Likes</span>
          <span>7 Comments</span>
        </div>
      </div>

      <!-- Post 3 -->
      <div class="bg-stone-50 dark:bg-stone-700 p-4 rounded-lg shadow-sm">
        <div class="flex items-center mb-3">
          <img src="https://randomuser.me/api/portraits/men/19.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-stone-300 dark:border-stone-600">
          <div>
            <p class="font-semibold text-stone-800 dark:text-stone-200">Peter Jones</p>
            <p class="text-sm text-stone-500 dark:text-stone-400">3 days ago</p>
          </div>
        </div>
        <p class="text-stone-700 dark:text-stone-300 mb-3">Just launched my new portfolio! Check it out and let me know what you think. [Link to portfolio]</p>
        <div class="flex justify-between text-stone-500 dark:text-stone-400 text-sm">
          <span>8 Likes</span>
          <span>2 Comments</span>
        </div>
      </div>
    </div>
  </div>
</div>