Community Forum Component

<div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-purple-500 via-pink-500 to-red-500 dark:from-gray-900 dark:via-purple-900 dark:to-pink-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl bg-white bg-opacity-90 dark:bg-gray-800 dark:bg-opacity-95 rounded-xl shadow-2xl overflow-hidden transform transition-all duration-300 ease-in-out hover:scale-[1.01]">
    <div class="p-6 sm:p-8 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-red-600 to-indigo-600 dark:from-red-400 dark:to-indigo-400 mb-2 transition-colors duration-300">
        Cosmic Conversations
      </h2>
      <p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 transition-colors duration-300">
        Join the vibrant discussion! Your hub for all things entertainment.
      </p>
    </div>

    <div class="p-6 sm:p-8 grid gap-6 sm:gap-8">

      <!-- Forum Post 1 -->
      <div class="bg-white dark:bg-gray-900 rounded-lg p-5 sm:p-6 shadow-lg transform transition-all duration-300 ease-in-out hover:shadow-xl hover:-translate-y-1 border border-gray-100 dark:border-gray-700">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full mr-4 border-2 border-pink-500 dark:border-purple-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-lg text-gray-900 dark:text-white">Alex 'The Wanderer' Ross</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Posted 2 hours ago</p>
          </div>
        </div>
        <h3 class="text-xl md:text-2xl font-bold mb-3 text-gray-800 dark:text-gray-100">"Favorite Sci-Fi series of all time?" 🎉</h3>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
          Just finished binge-watching 'Starbound Chronicles' again and it got me thinking. What's everyone's absolute favorite sci-fi series, movies included? The one that changed your view of the universe!
        </p>
        <img class="w-full h-48 object-cover rounded-lg mb-4 shadow" src="https://picsum.photos/600/300?random=1" alt="Placeholder image for post">
        <div class="flex items-center justify-between text-gray-600 dark:text-gray-400 text-sm">
          <div class="flex items-center space-x-4">
            <button class="flex items-center space-x-1 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
              <span>154 Likes</span>
            </button>
            <button class="flex items-center space-x-1 text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 017 7v2a1 1 0 11-2 0v-2a5 5 0 00-5-5H5.414l2.293 2.293a1 1 0 11-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
              <span>48 Comments</span>
            </button>
          </div>
          <a href="#" class="text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300 font-semibold transition-colors duration-200">Read More</a>
        </div>
      </div>

      <!-- Forum Post 2 -->
      <div class="bg-white dark:bg-gray-900 rounded-lg p-5 sm:p-6 shadow-lg transform transition-all duration-300 ease-in-out hover:shadow-xl hover:-translate-y-1 border border-gray-100 dark:border-gray-700">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full mr-4 border-2 border-green-500 dark:border-teal-500" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-lg text-gray-900 dark:text-white">Luna 'The Dreamweaver' Bright</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Posted 5 hours ago</p>
          </div>
        </div>
        <h3 class="text-xl md:text-2xl font-bold mb-3 text-gray-800 dark:text-gray-100">"Underrated Indie Games for a Weekend Binge?" 🎮✨</h3>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
          Hey fellow gamers! My usual rotation is getting a bit stale. Any recommendations for truly underrated indie games that flew under the radar but deserve some love? Thinking unique art styles or compelling narratives.
        </p>
        <img class="w-full h-48 object-cover rounded-lg mb-4 shadow" src="https://picsum.photos/600/300?random=2" alt="Placeholder image for post">
        <div class="flex items-center justify-between text-gray-600 dark:text-gray-400 text-sm">
          <div class="flex items-center space-x-4">
            <button class="flex items-center space-x-1 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
              <span>87 Likes</span>
            </button>
            <button class="flex items-center space-x-1 text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 017 7v2a1 1 0 11-2 0v-2a5 5 0 00-5-5H5.414l2.293 2.293a1 1 0 11-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
              <span>22 Comments</span>
            </button>
          </div>
          <a href="#" class="text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300 font-semibold transition-colors duration-200">View Discussion</a>
        </div>
      </div>

    </div>

    <div class="p-6 sm:p-8 border-t border-gray-200 dark:border-gray-700 flex justify-center">
      <button class="px-8 py-3 rounded-full text-white font-bold text-lg 
                     bg-gradient-to-r from-red-500 to-orange-500 
                     hover:from-red-600 hover:to-orange-600 
                     dark:from-pink-600 dark:to-purple-600 
                     dark:hover:from-pink-700 dark:hover:to-purple-700 
                     shadow-lg transform transition-all duration-300 
                     hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 
                     focus:ring-offset-2 focus:ring-red-500 dark:focus:ring-pink-500">
        Create New Post
      </button>
    </div>
  </div>
</div>