HTML 代码
<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>