Componente di feedback
Un componente di feedback reattivo progettato per la modalità oscura con colori vivaci, ideale per blog e consumo di contenuti.
Codice HTML
<div class="max-w-3xl mx-auto p-6 bg-gray-800 dark:bg-gray-900 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold text-white mb-4">Feedback</h2>
<div class="mb-4">
<textarea class="w-full p-3 bg-gray-700 dark:bg-gray-800 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-violet-500" rows="4" placeholder="Leave your feedback here..."></textarea>
</div>
<div class="flex items-center mb-6">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<span class="text-white font-medium">John Doe</span>
</div>
<div class="flex justify-between">
<button class="px-4 py-2 bg-violet-600 hover:bg-violet-500 text-white font-semibold rounded-lg focus:outline-none focus:ring-2 focus:ring-violet-500">Submit</button>
<button class="px-4 py-2 bg-gray-600 hover:bg-gray-500 text-white font-semibold rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-500">Cancel</button>
</div>
</div>
<div class="max-w-3xl mx-auto mt-8 p-6 bg-gray-800 dark:bg-gray-900 rounded-lg shadow-lg">
<h3 class="text-xl font-bold text-white mb-4">Previous Feedback</h3>
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div class="flex-1">
<p class="text-white">Amazing content! I loved the insights shared in this article.</p>
<span class="text-gray-400 text-sm">Posted on Nov 12, 2023</span>
</div>
</div>
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div class="flex-1">
<p class="text-white">Great reading experience. Looking forward to more articles!</p>
<span class="text-gray-400 text-sm">Posted on Nov 11, 2023</span>
</div>
</div>
</div>Componenti correlati
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.
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
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.