Componente del Foro de la Comunidad

<div class="min-h-screen bg-gray-200 dark:bg-gray-900 flex items-center justify-center p-4">
  <div class="bg-gray-200 dark:bg-gray-800 p-8 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark max-w-md w-full">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-6 text-center">Community Forum</h2>
    
    <div class="mb-4 bg-gray-100 dark:bg-gray-700 p-3 rounded-lg shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
      <div class="flex items-center mb-2">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 shadow-neumorphic-light dark:shadow-neumorphic-dark">
        <p class="font-medium text-gray-700 dark:text-gray-300">John Doe</p>
      </div>
      <p class="text-gray-600 dark:text-gray-400">"Looking for recommendations on the best ergonomic mouse for gaming!"</p>
      <div class="flex justify-between items-center text-sm text-gray-500 dark:text-gray-400 mt-3">
        <span>2 hours ago</span>
        <button class="text-blue-500 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300">Reply</button>
      </div>
    </div>

    <div class="mb-4 bg-gray-100 dark:bg-gray-700 p-3 rounded-lg shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
      <div class="flex items-center mb-2">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 shadow-neumorphic-light dark:shadow-neumorphic-dark">
        <p class="font-medium text-gray-700 dark:text-gray-300">Jane Smith</p>
      </div>
      <p class="text-gray-600 dark:text-gray-400">"Just received my order, the quality is amazing! Highly recommend this store."</p>
      <div class="flex justify-between items-center text-sm text-gray-500 dark:text-gray-400 mt-3">
        <span>1 day ago</span>
        <button class="text-blue-500 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300">Reply</button>
      </div>
    </div>

    <div class="mt-6">
      <button class="w-full bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-500 text-white py-2 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark transition duration-300">
        View More Posts
      </button>
    </div>
  </div>
</div>

<style>
  /* Neumorphism shadows - light mode */
  .shadow-neumorphic-light {
    box-shadow: 6px 6px 12px #b0b0b0, -6px -6px 12px #ffffff;
  }
  .shadow-neumorphic-inset-light {
    box-shadow: inset 5px 5px 10px #b0b0b0, inset -5px -5px 10px #ffffff;
  }

  /* Neumorphism shadows - dark mode */
  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #333333, -6px -6px 12px #555555;
  }
  .dark .shadow-neumorphic-inset-dark {
    box-shadow: inset 5px 5px 10px #333333, inset -5px -5px 10px #555555;
  }

  /* Triadic color scheme roughly used with blue for accent */
  /* Main background/base: gray (adjusting with neumorphism) */
  /* Accent 1: blue (for buttons/links) */
  /* Accent 2 & 3 would naturally emerge from interactions/hover states or subtle text colors */
</style>