Community-Forum-Komponente

<div class="min-h-screen bg-gray-200 dark:bg-gray-800 p-8 flex items-center justify-center font-sans">
  <div class="container mx-auto grid grid-cols-1 lg:grid-cols-3 gap-8">

    <!-- Left Sidebar: Forum Categories/List -->
    <div class="lg:col-span-1 bg-gray-200 dark:bg-gray-700 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-6 border-b border-gray-300 dark:border-gray-600 pb-2">Forum Categories</h2>
      <ul>
        <li class="mb-4">
          <a href="#" class="flex items-center p-3 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-300 hover:dark:bg-gray-600 shadow-neumorphic-flat-light dark:shadow-neumorphic-flat-dark transition duration-300">
            <span class="w-2 h-2 rounded-full bg-blue-400 mr-3"></span> General Discussion
          </a>
        </li>
        <li class="mb-4">
          <a href="#" class="flex items-center p-3 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-300 hover:dark:bg-gray-600 shadow-neumorphic-flat-light dark:shadow-neumorphic-flat-dark transition duration-300">
            <span class="w-2 h-2 rounded-full bg-green-400 mr-3"></span> Project Feedback
          </a>
        </li>
        <li class="mb-4">
          <a href="#" class="flex items-center p-3 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-300 hover:dark:bg-gray-600 shadow-neumorphic-flat-light dark:shadow-neumorphic-flat-dark transition duration-300">
            <span class="w-2 h-2 rounded-full bg-purple-400 mr-3"></span> Tech Talk
          </a>
        </li>
        <li class="mb-4">
          <a href="#" class="flex items-center p-3 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-300 hover:dark:bg-gray-600 shadow-neumorphic-flat-light dark:shadow-neumorphic-flat-dark transition duration-300">
            <span class="w-2 h-2 rounded-full bg-red-400 mr-3"></span> Off-Topic
          </a>
        </li>
      </ul>
    </div>

    <!-- Main Content: Forum Threads -->
    <div class="lg:col-span-2 bg-gray-200 dark:bg-gray-700 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-6 border-b border-gray-300 dark:border-gray-600 pb-2">Recent Threads</h2>

      <!-- Thread Card 1 -->
      <div class="mb-6 p-4 rounded-lg bg-gray-300 dark:bg-gray-600 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark flex items-start space-x-4">
        <div class="flex-shrink-0">
          <img class="h-12 w-12 rounded-full border-2 border-blue-300 dark:border-blue-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        </div>
        <div class="flex-grow">
          <h3 class="text-lg font-medium text-gray-800 dark:text-gray-100">Help needed with Neumorphism shadows</h3>
          <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div class="flex items-center text-xs text-gray-500 dark:text-gray-400">
            <span class="mr-4">Posted by <span class="font-semibold text-blue-500 dark:text-blue-400">John Doe</span></span>
            <span>2 hours ago</span>
             <span class="ml-auto flex items-center">
                <svg class="w-4 h-4 mr-1 text-green-500" 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.986 9.986 0 01-4.747-1.243l-3.321 1.66A.5.5 0 012 18.5V17c-.6-.7-1-1.6-1-2.5C1 10.582 5.03 7 10 7c.418 0 .825.022 1.222.062a.5.5 0 01.396.536l-.08.799A6.973 6.973 0 0010 10.5c-3.866 0-7 2.388-7 5.333V17l1.58.75A7.994 7.994 0 0010 18c3.866 0 7-2.388 7-5.333a.5.5 0 01.5-.5h.01c.276 0 .5-.224.5-.5v-.5a.5.5 0 01.5-.5h.01c.276 0 .5-.224.5-.5v-.5a.5.5 0 01.5-.5z"></path></svg>
                15
            </span>
          </div>
        </div>
      </div>

      <!-- Thread Card 2 -->
      <div class="mb-6 p-4 rounded-lg bg-gray-300 dark:bg-gray-600 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark flex items-start space-x-4">
        <div class="flex-shrink-0">
          <img class="h-12 w-12 rounded-full border-2 border-pink-300 dark:border-pink-500" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        </div>
        <div class="flex-grow">
          <h3 class="text-lg font-medium text-gray-800 dark:text-gray-100">Ideas for a portfolio redesign?</h3>
          <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          <div class="flex items-center text-xs text-gray-500 dark:text-gray-400">
            <span class="mr-4">Posted by <span class="font-semibold text-pink-500 dark:text-pink-400">Jane Smith</span></span>
            <span>5 hours ago</span>
            <span class="ml-auto flex items-center">
                 <svg class="w-4 h-4 mr-1 text-green-500" 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.986 9.986 0 01-4.747-1.243l-3.321 1.66A.5.5 0 012 18.5V17c-.6-.7-1-1.6-1-2.5C1 10.582 5.03 7 10 7c.418 0 .825.022 1.222.062a.5.5 0 01.396.536l-.08.799A6.973 6.973 0 0010 10.5c-3.866 0-7 2.388-7 5.333V17l1.58.75A7.994 7.994 0 0010 18c3.866 0 7-2.388 7-5.333a.5.5 0 01.5-.5h.01c.276 0 .5-.224.5-.5v-.5a.5.5 0 01.5-.5h.01c.276 0 .5-.224.5-.5v-.5a.5.5 0 01.5-.5z"></path></svg>
                27
            </span>
          </div>
        </div>
      </div>

      <!-- Thread Card 3 -->
      <div class="mb-6 p-4 rounded-lg bg-gray-300 dark:bg-gray-600 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark flex items-start space-x-4">
        <div class="flex-shrink-0">
          <img class="h-12 w-12 rounded-full border-2 border-green-300 dark:border-green-500" src="https://randomuser.me/api/portraits/women/21.jpg" alt="User Avatar">
        </div>
        <div class="flex-grow">
          <h3 class="text-lg font-medium text-gray-800 dark:text-gray-100">Best practices for responsive typography?</h3>
          <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
          <div class="flex items-center text-xs text-gray-500 dark:text-gray-400">
            <span class="mr-4">Posted by <span class="font-semibold text-green-500 dark:text-green-400">Alice Johnson</span></span>
            <span>Yesterday</span>
            <span class="ml-auto flex items-center">
                <svg class="w-4 h-4 mr-1 text-green-500" 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.986 9.986 0 01-4.747-1.243l-3.321 1.66A.5.5 0 012 18.5V17c-.6-.7-1-1.6-1-2.5C1 10.582 5.03 7 10 7c.418 0 .825.022 1.222.062a.5.5 0 01.396.536l-.08.799A6.973 6.973 0 0010 10.5c-3.866 0-7 2.388-7 5.333V17l1.58.75A7.994 7.994 0 0010 18c3.866 0 7-2.388 7-5.333a.5.5 0 01.5-.5h.01c.276 0 .5-.224.5-.5v-.5a.5.5 0 01.5-.5h.01c.276 0 .5-.224.5-.5v-.5a.5.5 0 01.5-.5z"></path></svg>
                12
            </span>
          </div>
        </div>
      </div>

      <button class="w-full py-3 mt-4 rounded-lg bg-blue-400 dark:bg-blue-600 text-white font-semibold shadow-neumorphic-flat-light dark:shadow-neumorphic-flat-dark hover:shadow-neumorphic-pressed-light hover:dark:shadow-neumorphic-pressed-dark transition duration-300">
        Load More Threads
      </button>
    </div>

  </div>
</div>

<style>
  /* Neumorphic Shadows - Light Mode */
  .shadow-neumorphic-light {
    box-shadow: 8px 8px 15px #a3b1c6, -8px -8px 15px #ffffff;
  }
  .shadow-neumorphic-flat-light {
    box-shadow: 5px 5px 10px #a3b1c6, -5px -5px 10px #ffffff;
  }
  .shadow-neumorphic-inset-light {
    box-shadow: inset 5px 5px 10px #a3b1c6, inset -5px -5px 10px #ffffff;
  }
  .shadow-neumorphic-pressed-light {
    box-shadow: inset 5px 5px 10px #a3b1c6, inset -5px -5px 10px #ffffff;
  }

  /* Neumorphic Shadows - Dark Mode */
  .dark .shadow-neumorphic-dark {
    box-shadow: 8px 8px 15px #4a4a4a, -8px -8px 15px #2c2c2c;
  }
  .dark .shadow-neumorphic-flat-dark {
    box-shadow: 5px 5px 10px #4a4a4a, -5px -5px 10px #2c2c2c;
  }
  .dark .shadow-neumorphic-inset-dark {
    box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #2c2c2c;
  }
  .dark .shadow-neumorphic-pressed-dark {
    box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #2c2c2c;
  }

  /* Pastel Colors for Light Mode */
  .bg-gray-200 { background-color: #e0e5ec; } /* Light background */
  .bg-gray-300 { background-color: #dae0e8; } /* Slightly darker accent */
  .text-gray-700 { color: #5c6a7e; }
  .text-gray-600 { color: #7f8fa5; }
  .text-blue-400 { color: #87ceeb; } /* Sky Blue */
  .text-green-400 { color: #98fb98; } /* Pale Green */
  .text-purple-400 { color: #dda0dd; } /* Plum */
  .text-red-400 { color: #f08080; } /* Light Coral */
  .border-blue-300 { border-color: #a7d9f7; }
  .border-pink-300 { border-color: #f7a7d9; }
  .border-green-300 { border-color: #b3f7a7; }

  /* Pastel Colors for Dark Mode */
  .dark\:bg-gray-800 { background-color: #2c2c2c; }
  .dark\:bg-gray-700 { background-color: #3a3a3a; }
  .dark\:bg-gray-600 { background-color: #4a4a4a; }
  .dark\:text-gray-200 { color: #e0e0e0; }
  .dark\:text-gray-300 { color: #c0c0c0; }
  .dark\:text-gray-400 { color: #a0a0a0; }
  .dark\:text-gray-100 { color: #f0f0f0; }
  .dark\:text-blue-600 { color: #6495ed; } /* Cornflower Blue */
  .dark\:text-pink-600 { color: #ff69b4; } /* Hot Pink */
  .dark\:text-green-600 { color: #3cb371; } /* Medium Sea Green */
  .dark\:border-blue-500 { border-color: #4682b4; }
  .dark\:border-pink-500 { border-color: #c71585; }
  .dark\:border-green-500 { border-color: #2e8b57; }
  .dark\:focus\:ring-blue-500 { --tw-ring-color: #6495ed; }

</style>

<script>
  // You can toggle dark mode with a simple script if needed,
  // for example, by adding/removing the "dark" class to the root element.
  // This example assumes a mechanism for dark mode toggling is already in place or will be added externally.
</script>