Componente di feedback
Un componente di feedback reattivo progettato con i principi del Material Design, che incorpora i toni della terra e predisposto per il supporto della modalità oscura. Questo componente è progettato specificamente per le dashboard e presenta vari elementi interattivi.
Codice HTML
<div class="max-w-4xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">User Feedback</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Feedback Item -->
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
<div class="flex items-center mb-3">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3" />
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h3>
</div>
<p class="text-gray-600 dark:text-gray-300">"The new dashboard layout is intuitive and allows for quick access to data. I really appreciate the improvements!"</p>
<div class="mt-2">
<span class="text-sm font-medium text-gray-500 dark:text-gray-400">Rating: </span>
<span class="text-yellow-500 font-bold">⭐⭐⭐⭐⭐</span>
</div>
</div>
<!-- Feedback Item -->
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
<div class="flex items-center mb-3">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3" />
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h3>
</div>
<p class="text-gray-600 dark:text-gray-300">"Great features! However, I would like to see more customization options for the charts."</p>
<div class="mt-2">
<span class="text-sm font-medium text-gray-500 dark:text-gray-400">Rating: </span>
<span class="text-yellow-500 font-bold">⭐⭐⭐⭐</span>
</div>
</div>
</div>
<div class="mt-6">
<textarea class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-gray-300 dark:focus:ring-gray-500" rows="4" placeholder="Leave your feedback here..."></textarea>
</div>
<button class="mt-4 bg-green-500 hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-600 text-white font-semibold py-2 px-4 rounded-lg transition duration-200">Submit Feedback</button>
</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 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.
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.