社区论坛组件 - Retro Ocean Blue

<div class="bg-gradient-to-br from-blue-300 to-sky-500 min-h-screen p-4 font-mono text-gray-800 dark:from-sky-900 dark:to-blue-950 dark:text-gray-200">
  <div class="max-w-2xl mx-auto bg-white rounded-lg shadow-xl overflow-hidden transform perspective-100 rotate-x-3 transition-transform duration-500 ease-in-out hover:rotate-x-0 dark:bg-gray-800">
    <div class="border-b-4 border-blue-600 px-6 py-4 flex items-center justify-between bg-blue-700 text-white dark:bg-blue-900 dark:border-blue-700">
      <h2 class="text-2xl font-bold tracking-wide uppercase drop-shadow-lg">\/\/ Career HQ Forum \/\/</h2>
      <span class="text-sm italic">established 1992</span>
    </div>
    <div class="px-6 py-4 border-b border-blue-200 dark:border-blue-700">
      <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/67.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-4 border-blue-400 object-cover shadow-md dark:border-blue-600">
        <div class="flex-1">
          <p class="text-blue-700 text-lg font-semibold dark:text-blue-300">New Post:</p>
          <input type="text" placeholder="Enter your topic title here..." class="w-full p-2 mt-1 border-2 border-blue-400 rounded-md bg-blue-50 text-blue-800 focus:outline-none focus:border-blue-600 dark:bg-blue-900 dark:border-blue-600 dark:text-blue-100">
        </div>
        <button class="px-5 py-2 bg-blue-600 text-white font-bold rounded-lg shadow-lg hover:bg-blue-700 transition-colors duration-200 transform hover:-translate-y-1 active:translate-y-0 active:shadow-md dark:bg-blue-700 dark:hover:bg-blue-800">
          POST <span class="hidden sm:inline">TOPIC</span>
        </button>
      </div>
    </div>
    <div class="p-6 space-y-6">
      <!-- Forum Thread 1 -->
      <div class="bg-blue-50 p-4 rounded-lg shadow-md border-l-4 border-blue-500 transform transition-transform duration-300 hover:scale-[1.01] dark:bg-blue-900 dark:border-blue-600">
        <div class="flex items-start mb-2">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-blue-300 dark:border-blue-500">
          <div>
            <p class="font-bold text-blue-800 dark:text-blue-200">JaneDoe87</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Posted: 10/26/23 14:35 MST</p>
          </div>
        </div>
        <h3 class="text-xl font-bold text-blue-700 mb-2 dark:text-blue-300">Seeking Advice: Transitioning from Marketing to Tech Sales!</h3>
        <p class="text-gray-700 dark:text-gray-300">Hey folks, I'm looking to pivot my career into tech sales. Any tips on resumes, interviews, or entry-level roles? What skills should I highlight?</p>
        <div class="mt-3 flex justify-between items-center text-sm">
          <span class="text-blue-600 dark:text-blue-400">Replies: 12</span>
          <a href="#" class="text-blue-600 hover:underline dark:text-blue-400 dark:hover:text-blue-200">[ View Thread ]</a>
        </div>
      </div>

      <!-- Forum Thread 2 -->
      <div class="bg-blue-50 p-4 rounded-lg shadow-md border-l-4 border-blue-500 transform transition-transform duration-300 hover:scale-[1.01] dark:bg-blue-900 dark:border-blue-600">
        <div class="flex items-start mb-2">
          <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-blue-300 dark:border-blue-500">
          <div>
            <p class="font-bold text-blue-800 dark:text-blue-200">CodeMaestro</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Posted: 10/26/23 11:01 MST</p>
          </div>
        </div>
        <h3 class="text-xl font-bold text-blue-700 mb-2 dark:text-blue-300">Frontend Devs: Best Practices for Responsive Design?</h3>
        <p class="text-gray-700 dark:text-gray-300">What are your go-to strategies for ensuring truly responsive designs? Any specific frameworks or CSS methodologies you prefer?</p>
        <div class="mt-3 flex justify-between items-center text-sm">
          <span class="text-blue-600 dark:text-blue-400">Replies: 28</span>
          <a href="#" class="text-blue-600 hover:underline dark:text-blue-400 dark:hover:text-blue-200">[ View Thread ]</a>
        </div>
      </div>

      <!-- Forum Thread 3 -->
      <div class="bg-blue-50 p-4 rounded-lg shadow-md border-l-4 border-blue-500 transform transition-transform duration-300 hover:scale-[1.01] dark:bg-blue-900 dark:border-blue-600">
        <div class="flex items-start mb-2">
          <img src="https://randomuser.me/api/portraits/women/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-blue-300 dark:border-blue-500">
          <div>
            <p class="font-bold text-blue-800 dark:text-blue-200">ResumeGuru</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Posted: 10/25/23 09:10 MST</p>
          </div>
        </div>
        <h3 class="text-xl font-bold text-blue-700 mb-2 dark:text-blue-300">Tips for Acing Your Next Video Interview</h3>
        <p class="text-gray-700 dark:text-gray-300">With more remote roles, video interviews are standard. Share your best advice for setup, lighting, virtual backgrounds, and common pitfalls!</p>
        <div class="mt-3 flex justify-between items-center text-sm">
          <span class="text-blue-600 dark:text-blue-400">Replies: 9</span>
          <a href="#" class="text-blue-600 hover:underline dark:text-blue-400 dark:hover:text-blue-200">[ View Thread ]</a>
        </div>
      </div>
    </div>
    <div class="border-t-4 border-blue-600 px-6 py-4 flex items-center justify-between text-xs text-gray-600 bg-blue-700 text-white dark:bg-blue-900 dark:border-blue-700 dark:text-gray-300">
      <p>&copy; 2023 CareerHQ - All Rights Reserved</p>
      <p>Forum Version 4.2 Beta</p>
    </div>
  </div>
</div>