Componente de retroalimentación
Un componente de retroalimentación minimalista con diseño responsivo, soporte para temas oscuros y sin JavaScript. Incluye un avatar, texto de comentarios de los usuarios y calificaciones representadas por estrellas.
Código HTML
<div class="max-w-md mx-auto p-6 bg-white rounded-lg shadow-md dark:bg-gray-800 transition-shadow duration-300 ease-in-out">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div class="ml-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h2>
<span class="text-gray-500 dark:text-gray-400 text-sm">2 hours ago</span>
</div>
</div>
<div class="mb-4">
<div class="flex items-center">
<span class="text-yellow-500">
📍📍📍📍📍
</span>
<span class="text-gray-500 dark:text-gray-400 ml-2">Rating: 4.5/5</span>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300">
This is a sample feedback message from the user. It highlights the positive aspects and any areas for improvement.
</p>
<div class="mt-4">
<img class="rounded-md" src="https://picsum.photos/400/200" alt="Feedback Image">
</div>
</div>
Componentes relacionados
Componente de retroalimentación
Un componente de retroalimentación receptivo que incorpora microinteracciones con animaciones atractivas. Está diseñado para admitir el modo oscuro y presenta elementos para los comentarios de los usuarios con imágenes de marcador de posición y avatares.
Componentes de retroalimentación
Un componente de retroalimentación complejo diseñado para sitios web comerciales/corporativos en modo oscuro, que utiliza un esquema de color complementario.
Componentes de retroalimentación Componente
Componente de retroalimentación de Glassmorphism simple para redes sociales, con un esquema de color triádico, diseño receptivo y soporte para temas oscuros. No se requiere JavaScript.