Sección de comentarios de Cyberpunk
Un componente de sección de comentarios simple y receptivo con una estética de neón ciberpunk y futurista y un esquema de color degradado de arco iris, adecuado para sitios web de viajes / turismo. Incluye soporte para modo oscuro.
Código 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>
Componentes relacionados
Componente de la sección de comentarios
Componente de la sección de comentarios con microinteracciones, combinación de colores pastel, complejidad moderada para el tablero, responsivo con soporte para temas oscuros, usando Tailwind CSS. Imágenes de picsum.photos para imágenes y randomuser.me para avatares. Sin JavaScript.
Componente de la sección de comentarios
Un componente de sección de comentarios inspirado en el glassmorphism para blogs o páginas de contenido, con elementos translúcidos similares al vidrio esmerilado, colores vibrantes, capacidad de respuesta y compatibilidad con el modo oscuro.
Componente de la sección de comentarios
Un sencillo componente de la sección de comentarios diseñado con estética retro/vintage y tonos tierra. Cuenta con un diseño nostálgico que recuerda a los años 80 y 90, adaptado a las interfaces de las redes sociales, con soporte para el modo oscuro.