Community Forum Component

<div class="p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-900 rounded-lg shadow-lg max-w-4xl mx-auto font-sans">
  <div class="text-center mb-6 sm:mb-8">
    <h2 class="text-2xl sm:text-3xl md:text-4xl font-extrabold pb-2 text-transparent bg-clip-text bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 dark:from-red-400 dark:via-yellow-400 dark:to-green-400">
      Team Talk Hub
    </h2>
    <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base leading-relaxed">
      Connect with your teammates and discuss game strategies.
    </p>
  </div>

  <div class="space-y-4">
    <!-- Forum Post 1 -->
    <article class="bg-white dark:bg-gray-800 p-4 sm:p-5 rounded-lg shadow-md border border-gray-100 dark:border-gray-700 transition-all duration-300 hover:shadow-lg">
      <div class="flex items-center mb-3">
        <img class="w-8 h-8 sm:w-10 sm:h-10 rounded-full mr-3 border-2 border-transparent bg-gradient-to-r from-blue-500 to-purple-500 p-0.5" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Avatar of John Doe">
        <div>
          <h4 class="font-semibold text-gray-900 dark:text-white text-base sm:text-lg">John Doe</h4>
          <p class="text-gray-500 dark:text-gray-400 text-xs sm:text-sm">2 hours ago</p>
        </div>
      </div>
      <p class="text-gray-700 dark:text-gray-200 text-sm sm:text-base leading-relaxed mb-3">
        Great effort everyone in training today! Let's keep up the intensity for Saturday's match. Any thoughts on offensive plays?
      </p>
      <button class="text-blue-600 dark:text-blue-400 hover:underline text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
        Reply
      </button>
    </article>

    <!-- Forum Post 2 -->
    <article class="bg-white dark:bg-gray-800 p-4 sm:p-5 rounded-lg shadow-md border border-gray-100 dark:border-gray-700 transition-all duration-300 hover:shadow-lg">
      <div class="flex items-center mb-3">
        <img class="w-8 h-8 sm:w-10 sm:h-10 rounded-full mr-3 border-2 border-transparent bg-gradient-to-r from-teal-500 to-cyan-500 p-0.5" src="https://randomuser.me/api/portraits/women/67.jpg" alt="Avatar of Jane Smith">
        <div>
          <h4 class="font-semibold text-gray-900 dark:text-white text-base sm:text-lg">Jane Smith</h4>
          <p class="text-gray-500 dark:text-gray-400 text-xs sm:text-sm">1 hour ago</p>
        </div>
      </div>
      <p class="text-gray-700 dark:text-gray-200 text-sm sm:text-base leading-relaxed mb-3">
        I agree, John! Maybe we could try that new set piece we practiced? It felt really strong. Looking forward to the game!
      </p>
      <button class="text-blue-600 dark:text-blue-400 hover:underline text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
        Reply
      </button>
    </article>
  </div>

  <div class="mt-6 sm:mt-8">
    <button class="w-full py-2 px-4 rounded-lg font-semibold text-white bg-gradient-to-r from-purple-600 via-pink-600 to-red-600 dark:from-purple-500 dark:via-pink-500 dark:to-red-500 hover:from-purple-700 hover:via-pink-700 hover:to-red-700 dark:hover:from-purple-600 dark:hover:via-pink-600 dark:hover:to-red-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 dark:focus:ring-offset-gray-900 transition-colors duration-300">
      Create New Post
    </button>
  </div>
</div>