サイバーパンクコメントセクション

<section class="py-8 px-4 bg-gray-900 dark:bg-black text-white font-mono">
  <div class="max-w-xl mx-auto">
    <h2 class="text-2xl md:text-3xl font-bold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-red-500 via-yellow-400 to-green-500 dark:from-red-300 dark:via-yellow-200 dark:to-green-300">
      Traveler Echoes
    </h2>

    <div class="mb-6 p-4 rounded-xl border border-gray-700 dark:border-gray-800 shadow-lg bg-gray-800 dark:bg-gray-950">
      <div class="flex items-center mb-3">
        <img class="w-10 h-10 rounded-full mr-3 border-2 border-fuchsia-500 dark:border-cyan-400 object-cover" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
        <div>
          <h4 class="font-semibold text-aqua-400 dark:text-lime-300">Aisha_Voyager</h4>
          <p class="text-xs text-gray-400 dark:text-gray-500">2 days ago</p>
        </div>
      </div>
      <p class="text-gray-200 dark:text-gray-300 leading-relaxed">
        "The neon-lit streets of Neo-Kyoto were an absolute dream! Navigating the floating sky-trams with the city's hum was an experience beyond words. Highly recommend for any adventurer seeking a true urban spectacle."
      </p>
    </div>

    <div class="mb-6 p-4 rounded-xl border border-gray-700 dark:border-gray-800 shadow-lg bg-gray-800 dark:bg-gray-950">
      <div class="flex items-center mb-3">
        <img class="w-10 h-10 rounded-full mr-3 border-2 border-green-500 dark:border-yellow-400 object-cover" src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar">
        <div>
          <h4 class="font-semibold text-blue-400 dark:text-purple-300">Synth_Nomad</h4>
          <p class="text-xs text-gray-400 dark:text-gray-500">4 days ago</p>
        </div>
      </div>
      <p class="text-gray-200 dark:text-gray-300 leading-relaxed">
        "Just completed the 'Andromeda Nebula' virtual reality tour. The hyper-accurate simulations of the exoplanets were breathtaking. It felt incredibly real, almost like I was truly there. A must-do for space enthusiasts!"
      </p>
    </div>

    <div class="mb-6 p-4 rounded-xl border border-gray-700 dark:border-gray-800 shadow-lg bg-gray-800 dark:bg-gray-950">
      <div class="flex items-center mb-3">
        <img class="w-10 h-10 rounded-full mr-3 border-2 border-yellow-400 dark:border-red-400 object-cover" src="https://randomuser.me/api/portraits/women/33.jpg" alt="User Avatar">
        <div>
          <h4 class="font-semibold text-pink-400 dark:text-orange-300">Glitch_Queen</h4>
          <p class="text-xs text-gray-400 dark:text-gray-500">1 week ago</p>
        </div>
      </div>
      <p class="text-gray-200 dark:text-gray-300 leading-relaxed">
        "The 'Digital Sahara' desert trek was surprisingly intense, even through a haptic suit. The bioluminescent cacti at night were mesmerizing. Pack plenty of virtual hydration, you'll need it!"
      </p>
    </div>

    <div class="mt-8">
      <h3 class="text-xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-red-500 via-yellow-400 to-green-500 dark:from-red-300 dark:via-yellow-200 dark:to-green-300">
        Leave Your Echo
      </h3>
      <textarea class="w-full p-3 mb-4 rounded-lg bg-gray-800 dark:bg-gray-950 border border-gray-700 dark:border-gray-800 text-white focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-blue-400 placeholder-gray-500 dark:placeholder-gray-600 resize-none" rows="4" placeholder="Share your travel experiences..."></textarea>
      <button class="w-full md:w-auto px-6 py-3 rounded-lg font-bold text-white shadow-lg 
                      bg-gradient-to-r from-purple-600 via-pink-500 to-red-500 
                      hover:from-purple-700 hover:via-pink-600 hover:to-red-600 
                      focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 
                      dark:from-blue-600 dark:via-cyan-500 dark:to-green-500 
                      dark:hover:from-blue-700 dark:hover:via-cyan-600 dark:hover:to-green-600 
                      dark:focus:ring-blue-400 dark:focus:ring-offset-gray-900">
        Submit Echo
      </button>
    </div>
  </div>
</section>