Componente Componenti di feedback
Un componente Feedback Components complesso, reattivo e supportato da temi scuri per una dashboard, progettato con un'estetica minimalista/piatta e una combinazione di colori pastello. Visualizza vari elementi di feedback come una barra di avanzamento, indicatori di stato e attività recenti, utilizzando solo HTML con le classi CSS di Tailwind.
Codice 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>Componenti correlati
Componente di feedback
Un componente di feedback minimalista con design reattivo, supporto per temi scuri e assenza di JavaScript. Include un avatar, un testo di feedback dell'utente e valutazioni rappresentate da stelle.
Componente di feedback
Un componente di feedback reattivo progettato per le interfacce di social networking, che incorpora elementi di progettazione 3D in una combinazione di colori in scala di grigi con supporto per la modalità scura, su misura per media complessità e interattività.
Componente Componenti di feedback
Un componente di feedback minimalista progettato per l'e-commerce, con colori pastello tenui, design reattivo e supporto per temi scuri. Il componente include un modulo di feedback con campi di input, un sistema di valutazione e un pulsante di invio, il tutto con Tailwind CSS.