Componentes de retroalimentación Componente
Un componente de componentes de retroalimentación complejo, receptivo y compatible con temas oscuros para un tablero, diseñado con una estética minimalista / plana y una combinación de colores pastel. Muestra varios elementos de retroalimentación, como una barra de progreso, indicadores de estado y actividad reciente, utilizando solo HTML con clases CSS de Tailwind.
Código HTML
<div class="p-6 bg-white dark:bg-gray-800 shadow-lg rounded-lg">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-6">Feedback Overview</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
<!-- Positive Feedback -->
<div class="bg-gradient-to-r from-green-200 to-green-100 dark:from-green-700 dark:to-green-600 p-4 rounded-md flex items-center justify-between">
<div class="flex items-center">
<div class="p-3 bg-green-400 dark:bg-green-500 rounded-full mr-3">
<svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<p class="text-green-800 dark:text-green-100 font-medium">Positive Feedback</p>
</div>
<span class="text-green-800 dark:text-green-100 text-xl font-bold">85%</span>
</div>
<!-- Negative Feedback -->
<div class="bg-gradient-to-r from-red-200 to-red-100 dark:from-red-700 dark:to-red-600 p-4 rounded-md flex items-center justify-between">
<div class="flex items-center">
<div class="p-3 bg-red-400 dark:bg-red-500 rounded-full mr-3">
<svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</div>
<p class="text-red-800 dark:text-red-100 font-medium">Negative Feedback</p>
</div>
<span class="text-red-800 dark:text-red-100 text-xl font-bold">15%</span>
</div>
</div>
<!-- Feedback Progress Bar -->
<div class="mb-8">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-3">Overall Satisfaction</h3>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4">
<div class="bg-teal-400 h-4 rounded-full" style="width: 75%;"></div>
</div>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-2 text-right">75% Satisfied</p>
</div>
<!-- Recent Feedback Activity -->
<div>
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-4">Recent Activity</h3>
<ul class="space-y-4">
<li class="flex items-center">
<img class="h-10 w-10 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div class="flex-grow">
<p class="text-gray-800 dark:text-gray-100 font-medium">"Great service, very helpful!"</p>
<p class="text-sm text-gray-500 dark:text-gray-400">- Jane Doe <span class="ml-2 px-2 py-0.5 bg-green-100 dark:bg-green-700 text-green-700 dark:text-green-100 text-xs font-semibold rounded-full">Positive</span></p>
</div>
<span class="text-sm text-gray-400 dark:text-gray-500">2 hours ago</span>
</li>
<li class="flex items-center">
<img class="h-10 w-10 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div class="flex-grow">
<p class="text-gray-800 dark:text-gray-100 font-medium">"Room for improvement on delivery."</p>
<p class="text-sm text-gray-500 dark:text-gray-400">- John Smith <span class="ml-2 px-2 py-0.5 bg-yellow-100 dark:bg-yellow-700 text-yellow-700 dark:text-yellow-100 text-xs font-semibold rounded-full">Neutral</span></p>
</div>
<span class="text-sm text-gray-400 dark:text-gray-500">1 day ago</span>
</li>
<li class="flex items-center">
<img class="h-10 w-10 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/60.jpg" alt="User Avatar">
<div class="flex-grow">
<p class="text-gray-800 dark:text-gray-100 font-medium">"Not satisfied with the product quality."</p>
<p class="text-sm text-gray-500 dark:text-gray-400">- Emily White <span class="ml-2 px-2 py-0.5 bg-red-100 dark:bg-red-700 text-red-700 dark:text-red-100 text-xs font-semibold rounded-full">Negative</span></p>
</div>
<span class="text-sm text-gray-400 dark:text-gray-500">3 days ago</span>
</li>
</ul>
</div>
</div>Componentes relacionados
Componente de retroalimentación
Un componente de retroalimentación receptivo diseñado con los principios de Material Design, incorporando tonos tierra y equipado para soporte de modo oscuro. Este componente está diseñado específicamente para paneles y cuenta con varios elementos interactivos.
Organic_Nature_Inspired_Food_Feedback_Component
Un componente de retroalimentación de complejidad moderada para sitios web de alimentos/restaurantes, con un diseño orgánico/inspirado en la naturaleza con tonos tierra y capacidad de respuesta completa, incluida la compatibilidad con el modo oscuro.
Componentes de retroalimentación Componente
Un componente de retroalimentación brutalista simple con colores en escala de grises, soporte para modo oscuro y diseño receptivo.