Community Forum Component

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex items-center justify-center font-sans">
  <div class="bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 rounded-3xl shadow-2xl p-6 w-full max-w-2xl border-t border-l border-gray-200 dark:border-gray-600">
    <div class="text-center mb-8">
      <h1 class="text-4xl font-extrabold text-gray-800 dark:text-gray-100 drop-shadow-md">Community Forum</h1>
      <p class="text-gray-600 dark:text-gray-300 mt-2">Connect, Share, Discuss.</p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
      <div class="bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-700 p-5 rounded-xl shadow-inner border border-gray-300 dark:border-gray-600 transform transition duration-300 hover:scale-105 hover:shadow-lg">
        <h2 class="text-xl font-bold text-gray-700 dark:text-gray-200 mb-2">Discussions</h2>
        <p class="text-gray-600 dark:text-gray-300 text-sm">Engage in lively conversations.</p>
        <button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5">
          View
        </button>
      </div>

      <div class="bg-gradient-to-br from-red-200 to-red-300 dark:from-red-800 dark:to-red-700 p-5 rounded-xl shadow-inner border border-red-300 dark:border-red-600 transform transition duration-300 hover:scale-105 hover:shadow-lg">
        <h2 class="text-xl font-bold text-red-700 dark:text-red-200 mb-2">Announcements</h2>
        <p class="text-red-600 dark:text-red-300 text-sm">Stay updated with the latest news.</p>
        <button class="mt-4 w-full bg-red-600 hover:bg-red-700 text-white font-semibold py-2 px-4 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5">
          View
        </button>
      </div>

      <div class="bg-gradient-to-br from-green-200 to-green-300 dark:from-green-800 dark:to-green-700 p-5 rounded-xl shadow-inner border border-green-300 dark:border-green-600 transform transition duration-300 hover:scale-105 hover:shadow-lg">
        <h2 class="text-xl font-bold text-green-700 dark:text-green-200 mb-2">Members</h2>
        <p class="text-green-600 dark:text-green-300 text-sm">Meet the community members.</p>
        <button class="mt-4 w-full bg-green-600 hover:bg-green-700 text-white font-semibold py-2 px-4 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5">
          View
        </button>
      </div>
    </div>

    <div class="bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-700 p-5 rounded-xl shadow-inner border border-gray-300 dark:border-gray-600">
      <h2 class="text-xl font-bold text-gray-700 dark:text-gray-200 mb-4">Latest Posts</h2>
      <div class="space-y-4">
        <div class="flex items-start bg-gray-100 dark:bg-gray-900 p-4 rounded-lg shadow-md border border-gray-300 dark:border-gray-600 transition duration-300 hover:shadow-lg">
          <img class="w-12 h-12 rounded-full ring-2 ring-blue-500 dark:ring-blue-400 mr-4" src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar">
          <div>
            <p class="text-blue-700 dark:text-blue-300 font-semibold">John Doe <span class="text-gray-500 dark:text-gray-400 text-sm italic">2 hours ago</span></p>
            <p class="text-gray-800 dark:text-gray-200">How do you handle state management in large scale applications?</p>
          </div>
        </div>
        <div class="flex items-start bg-gray-100 dark:bg-gray-900 p-4 rounded-lg shadow-md border border-gray-300 dark:border-gray-600 transition duration-300 hover:shadow-lg">
          <img class="w-12 h-12 rounded-full ring-2 ring-red-500 dark:ring-red-400 mr-4" src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="User Avatar">
          <div>
            <p class="text-red-700 dark:text-red-300 font-semibold">Jane Smith <span class="text-gray-500 dark:text-gray-400 text-sm italic">5 hours ago</span></p>
            <p class="text-gray-800 dark:text-gray-200">Excited about the new forum features!</p>
          </div>
        </div>
        <div class="flex items-start bg-gray-100 dark:bg-gray-900 p-4 rounded-lg shadow-md border border-gray-300 dark:border-gray-600 transition duration-300 hover:shadow-lg">
          <img class="w-12 h-12 rounded-full ring-2 ring-green-500 dark:ring-green-400 mr-4" src="https://randomuser.me/api/portraits/thumb/men/3.jpg" alt="User Avatar">
          <div>
            <p class="text-green-700 dark:text-green-300 font-semibold">Mike Johnson <span class="text-gray-500 dark:text-gray-400 text-sm italic">1 day ago</span></p>
            <p class="text-gray-800 dark:text-gray-200">Looking for collaborators on an open-source project.</p>
          </div>
        </div>
      </div>
      <button class="mt-6 w-full bg-yellow-500 hover:bg-yellow-600 text-white font-semibold py-3 px-4 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 tracking-wide text-lg">
        Load More Posts
      </button>
    </div>
  </div>
</div>