Community Forum Component (E-commerce Bauhaus)

<div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans antialiased">

  <!-- Section Title -->
  <h2 class="text-2xl sm:text-3xl font-bold mb-6 text-gray-800 dark:text-gray-100 text-center uppercase tracking-wider">
    Customer Stories & Feedback
  </h2>

  <div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-6">

    <!-- Forum Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-5 border border-gray-200 dark:border-gray-700 relative">
      <div class="absolute -top-3 -left-3 w-8 h-8 bg-blue-500 transform rotate-45"></div>
      <div class="flex items-start mb-4">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-blue-500 dark:border-blue-400 mr-4">
        <div>
          <p class="font-semibold text-lg text-gray-800 dark:text-gray-100">Jane Doe</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</p>
        </div>
      </div>
      <h3 class="text-xl font-semibold mb-3 text-gray-700 dark:text-gray-200">"Absolutely Transformed My Workflow!"</h3>
      <p class="text-gray-600 dark:text-gray-300 mb-4 text-base leading-relaxed">
        I was skeptical at first, but this product exceeded all my expectations. The quality is top-notch,
        and it integrated seamlessly with my existing setup. Highly recommend for anyone looking to boost productivity!
      </p>
      <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
        <span class="flex items-center mr-4">
          <svg class="w-4 h-4 mr-1 fill-blue-500 dark:fill-blue-400" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
          12 Likes
        </span>
        <span class="flex items-center">
          <svg class="w-4 h-4 mr-1 fill-gray-500 dark:fill-gray-400" viewBox="0 0 24 24"><path d="M21 11.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z"/></svg>
          5 Comments
        </span>
      </div>
    </div>

    <!-- Forum Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-5 border border-gray-200 dark:border-gray-700 relative">
      <div class="absolute -top-3 -right-3 w-8 h-8 bg-red-500 transform -rotate-45"></div>
      <div class="flex items-start mb-4">
        <img src="https://randomuser.me/api/portraits/men/29.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-red-500 dark:border-red-400 mr-4">
        <div>
          <p class="font-semibold text-lg text-gray-800 dark:text-gray-100">John Smith</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">1 day ago</p>
        </div>
      </div>
      <h3 class="text-xl font-semibold mb-3 text-gray-700 dark:text-gray-200">"Great Product, Minor Suggestion"</h3>
      <p class="text-gray-600 dark:text-gray-300 mb-4 text-base leading-relaxed">
        Overall, I'm very satisfied with my purchase. The build quality is solid, and it performs as advertised.
        My only constructive feedback would be to consider adding 'X' feature in a future update.
      </p>
      <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
        <span class="flex items-center mr-4">
          <svg class="w-4 h-4 mr-1 fill-red-500 dark:fill-red-400" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
          8 Likes
        </span>
        <span class="flex items-center">
          <svg class="w-4 h-4 mr-1 fill-gray-500 dark:fill-gray-400" viewBox="0 0 24 24"><path d="M21 11.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z"/></svg>
          2 Comments
        </span>
      </div>
    </div>

    <!-- Forum Card 3 (Placeholder for more, hidden on small screens) -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-5 border border-gray-200 dark:border-gray-700 hidden md:block relative">
      <div class="absolute -bottom-3 -right-3 w-8 h-8 bg-yellow-500 transform rotate-45"></div>
      <div class="flex items-start mb-4">
        <img src="https://randomuser.me/api/portraits/women/77.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-yellow-500 dark:border-yellow-400 mr-4">
        <div>
          <p class="font-semibold text-lg text-gray-800 dark:text-gray-100">Emily White</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">3 days ago</p>
        </div>
      </div>
      <h3 class="text-xl font-semibold mb-3 text-gray-700 dark:text-gray-200">"Fantastic Support Team!"</h3>
      <p class="text-gray-600 dark:text-gray-300 mb-4 text-base leading-relaxed">
        I had a small issue with my order, and the customer support was incredibly responsive and helpful.
        They resolved my problem quickly and professionally. Really appreciate the dedication!
      </p>
      <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
        <span class="flex items-center mr-4">
          <svg class="w-4 h-4 mr-1 fill-yellow-500 dark:fill-yellow-400" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
          15 Likes
        </span>
        <span class="flex items-center">
          <svg class="w-4 h-4 mr-1 fill-gray-500 dark:fill-gray-400" viewBox="0 0 24 24"><path d="M21 11.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z"/></svg>
          7 Comments
        </span>
      </div>
    </div>

    <!-- Forum Card 4 (Placeholder for more, hidden on small screens) -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-5 border border-gray-200 dark:border-gray-700 hidden md:block relative">
      <div class="absolute -bottom-3 -left-3 w-8 h-8 bg-green-500 transform -rotate-45"></div>
      <div class="flex items-start mb-4">
        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-green-500 dark:border-green-400 mr-4">
        <div>
          <p class="font-semibold text-lg text-gray-800 dark:text-gray-100">David Lee</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">5 days ago</p>
        </div>
      </div>
      <h3 class="text-xl font-semibold mb-3 text-gray-700 dark:text-gray-200">"A Must-Have for Every Enthusiast!"</h3>
      <p class="text-gray-600 dark:text-gray-300 mb-4 text-base leading-relaxed">
        I've been looking for a product like this for ages. It delivers on all its promises and more.
        Sturdy, efficient, and well-designed. Don't hesitate to buy it!
      </p>
      <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
        <span class="flex items-center mr-4">
          <svg class="w-4 h-4 mr-1 fill-green-500 dark:fill-green-400" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
          20 Likes
        </span>
        <span class="flex items-center">
          <svg class="w-4 h-4 mr-1 fill-gray-500 dark:fill-gray-400" viewBox="0 0 24 24"><path d="M21 11.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z"/></svg>
          10 Comments
        </span>
      </div>
    </div>

  </div>

  <!-- Call to Action / View More -->
  <div class="text-center mt-8">
    <button class="px-6 py-3 bg-gray-700 dark:bg-gray-200 text-white dark:text-gray-900 font-bold uppercase rounded-md 
                   tracking-wider hover:bg-gray-600 dark:hover:bg-gray-300 transition duration-300 ease-in-out
                   border border-gray-700 dark:border-gray-200 shadow-md">
      View All Discussions
    </button>
  </div>

</div>