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
Vibrant_Dark_Mode_Feedback_Component
Un componente di feedback semplice e vibrante progettato per piattaforme di intrattenimento/multimediali con un'interfaccia utente in modalità scura per ridurre l'affaticamento degli occhi. Presenta un titolo in evidenza, una sottodescrizione e un pulsante di invito all'azione, tutti completamente reattivi.
Memphis_Social_Media_Feedback_Component
Un componente di feedback sui social media semplice e reattivo con l'influenza del design Memphis utilizzando neutri caldi, con un pulsante Mi piace e un indicatore di commento. Supporta la modalità oscura.
Componente di feedback
Un componente di feedback reattivo progettato per la modalità oscura con colori vivaci, ideale per blog e consumo di contenuti.