Componentes Componentes de retroalimentación Componente de retroalimentación

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.

Vista previa

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

Vibrant_Dark_Mode_Feedback_Component

Un componente de retroalimentación simple y vibrante diseñado para plataformas de entretenimiento/medios con una interfaz de usuario de modo oscuro para reducir la fatiga visual. Cuenta con un título destacado, una subdescripción y un botón de llamada a la acción, todo totalmente responsivo.

Abrir