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 progettato per le interfacce dei social media, che incorpora microinterazioni e una combinazione di colori in scala di grigi, con supporto per temi scuri.
Componente di feedback 23
Un componente di feedback progettato in stile Material Design, con animazioni reattive e supporto per temi scuri, costruito con Tailwind CSS.
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.