Community Forum Component

<div class="font-sans antialiased bg-gray-50 dark:bg-gray-900 min-h-screen p-4 sm:p-6 lg:p-8 flex items-center justify-center">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
    <!-- Header Section -->
    <div class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 p-4 sm:p-6 text-white text-center rounded-t-lg">
      <h1 class="text-2xl sm:text-3xl font-bold tracking-tight mb-1">Community Forum</h1>
      <p class="text-sm sm:text-base opacity-90">Engage, learn, and connect with fellow professionals.</p>
    </div>

    <!-- Forum Body -->
    <div class="p-4 sm:p-6 lg:p-8 grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">

      <!-- Forum Card 1 -->
      <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 transition-all duration-300 hover:shadow-lg dark:hover:shadow-rose-700/50">
        <h3 class="text-lg sm:text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 whitespace-nowrap overflow-hidden text-ellipsis">General Discussion</h3>
        <p class="text-sm text-gray-600 dark:text-gray-300 mb-3">Share ideas, ask questions, and discuss general topics.</p>
        <div class="flex items-center text-xs text-gray-500 dark:text-gray-400">
          <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
          <span>124 Posts</span>
        </div>
      </div>

      <!-- Forum Card 2 -->
      <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 transition-all duration-300 hover:shadow-lg dark:hover:shadow-violet-700/50">
        <h3 class="text-lg sm:text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 whitespace-nowrap overflow-hidden text-ellipsis">Product Feedback</h3>
        <p class="text-sm text-gray-600 dark:text-gray-300 mb-3">Provide suggestions and report issues for our products.</p>
        <div class="flex items-center text-xs text-gray-500 dark:text-gray-400">
          <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
          <span>87 Posts</span>
        </div>
      </div>

      <!-- Forum Card 3 (Hidden on mobile for simplicity) -->
      <div class="hidden md:block bg-gray-100 dark:bg-gray-700 rounded-lg p-4 transition-all duration-300 hover:shadow-lg dark:hover:shadow-cyan-700/50">
        <h3 class="text-lg sm:text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 whitespace-nowrap overflow-hidden text-ellipsis">Announcements</h3>
        <p class="text-sm text-gray-600 dark:text-gray-300 mb-3">Stay updated with the latest news and company announcements.</p>
        <div class="flex items-center text-xs text-gray-500 dark:text-gray-400">
          <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
          <span>15 Posts</span>
        </div>
      </div>

    </div>

    <!-- Call to Action/Footer -->
    <div class="p-4 sm:p-6 lg:p-8 border-t border-gray-200 dark:border-gray-700 flex flex-col sm:flex-row items-center justify-between">
      <p class="text-sm text-gray-600 dark:text-gray-400 text-center sm:text-left mb-4 sm:mb-0">Ready to dive in?</p>
      <button class="px-6 py-2 bg-gradient-to-r from-blue-500 to-teal-500 text-white font-medium rounded-full shadow-md hover:shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
        Join the Conversation
      </button>
    </div>
  </div>
</div>