Componente Componenti di feedback
Componente di feedback dal design minimalista/piatto per dashboard con combinazione di colori complementari e complessità moderata, supporto per temi reattivi e scuri. Utilizza HTML e Tailwind CSS. Niente JavaScript. Dispone di elementi interattivi. Immagini da picsum.photos e avatar da randomuser.me.
Codice HTML
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
<div class="flex items-center justify-between mb-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">User Feedback</h2>
<span class="text-sm text-gray-500 dark:text-gray-400">Last 30 days</span>
</div>
<div class="space-y-4">
<div class="flex items-start space-x-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div class="flex-1">
<div class="flex items-center justify-between">
<h4 class="text-sm font-medium text-gray-900 dark:text-white">John Doe</h4>
<span class="text-xs text-gray-500 dark:text-gray-400">2 days ago</span>
</div>
<p class="text-sm text-gray-600 dark:text-gray-300">This dashboard is very helpful. The data is presented clearly.</p>
</div>
</div>
<div class="flex items-start space-x-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div class="flex-1">
<div class="flex items-center justify-between">
<h4 class="text-sm font-medium text-gray-900 dark:text-white">Jane Smith</h4>
<span class="text-xs text-gray-500 dark:text-gray-400">5 days ago</span>
</div>
<p class="text-sm text-gray-600 dark:text-gray-300">I love the new features! Especially the real-time updates.</p>
</div>
</div>
<div class="flex items-start space-x-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/19.jpg" alt="User Avatar">
<div class="flex-1">
<div class="flex items-center justify-between">
<h4 class="text-sm font-medium text-gray-900 dark:text-white">Peter Jones</h4>
<span class="text-xs text-gray-500 dark:text-gray-400">1 week ago</span>
</div>
<p class="text-sm text-gray-600 dark:text-gray-300">Could you add an option to export data as a CSV file?</p>
</div>
</div>
</div>
<div class="mt-6 flex justify-center">
<button class="px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:bg-indigo-700 dark:hover:bg-indigo-600 dark:focus:ring-offset-gray-800">View All Feedback</button>
</div>
</div>Componenti correlati
Componente Componenti di feedback
Semplice componente di feedback Glassmorphism per i social media, con una combinazione di colori triadica, un design reattivo e il supporto per temi scuri. Non è richiesto alcun JavaScript.
Componente di feedback
Un componente di feedback reattivo che incorpora microinterazioni con animazioni coinvolgenti. È progettato per supportare la modalità oscura e presenta elementi per il feedback degli utenti con immagini segnaposto e avatar.
Componenti di feedback
Un complesso componente di feedback progettato per siti Web aziendali/aziendali in modalità oscura, utilizzando una combinazione di colori complementare.