Componenti di feedback
Un complesso componente di feedback progettato per siti Web aziendali/aziendali in modalità oscura, utilizzando una combinazione di colori complementare.
Codice HTML
<div class="bg-gray-900 p-6 rounded-lg shadow-md dark:bg-gray-800">
<h2 class="text-2xl font-bold text-white mb-4">Feedback Component</h2>
<form class="space-y-4">
<div>
<label for="name" class="block text-gray-300 dark:text-gray-200">Name</label>
<input type="text" id="name" class="mt-1 p-2 w-full rounded-md border border-gray-700 bg-gray-800 text-gray-200 dark:bg-gray-900 dark:border-gray-600" placeholder="Your Name" required />
</div>
<div>
<label for="email" class="block text-gray-300 dark:text-gray-200">Email</label>
<input type="email" id="email" class="mt-1 p-2 w-full rounded-md border border-gray-700 bg-gray-800 text-gray-200 dark:bg-gray-900 dark:border-gray-600" placeholder="Your Email" required />
</div>
<div>
<label for="feedback" class="block text-gray-300 dark:text-gray-200">Feedback</label>
<textarea id="feedback" rows="4" class="mt-1 p-2 w-full rounded-md border border-gray-700 bg-gray-800 text-gray-200 dark:bg-gray-900 dark:border-gray-600" placeholder="Your Feedback" required></textarea>
</div>
<div class="flex items-center mb-4">
<input type="checkbox" id="subscribe" class="h-4 w-4 text-teal-500 border-gray-700 rounded dark:bg-gray-900 dark:border-gray-600" />
<label for="subscribe" class="ml-2 text-gray-300 dark:text-gray-200">Subscribe to our newsletter</label>
</div>
<button type="submit" class="w-full bg-teal-600 hover:bg-teal-500 rounded-md text-white font-semibold py-2 transition duration-200 ease-in-out">Submit</button>
</form>
<div class="mt-6">
<h3 class="text-lg font-semibold text-gray-400 dark:text-gray-300">Recent Feedback</h3>
<div class="mt-2 bg-gray-800 p-4 rounded-md shadow-md dark:bg-gray-700">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full mr-3" />
<div>
<p class="text-gray-200 dark:text-gray-100 font-bold">John Doe</p>
<p class="text-gray-300 dark:text-gray-400">Great service! Highly recommend.</p>
</div>
</div>
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full mr-3" />
<div>
<p class="text-gray-200 dark:text-gray-100 font-bold">Jane Smith</p>
<p class="text-gray-300 dark:text-gray-400">Loved the experience, will come back!</p>
</div>
</div>
</div>
</div>
</div>Componenti correlati
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.
Componente Componenti di feedback
Un componente di feedback con una scala di valutazione e un'area di testo per i commenti, con design reattivo e supporto per temi scuri.
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.