Componente Componenti di feedback
Un componente di feedback minimalista progettato per l'e-commerce, con colori pastello tenui, design reattivo e supporto per temi scuri. Il componente include un modulo di feedback con campi di input, un sistema di valutazione e un pulsante di invio, il tutto con Tailwind CSS.
Codice HTML
<div class="max-w-md mx-auto p-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Your Feedback Matters!</h2>
<p class="text-gray-600 dark:text-gray-400 mb-6">We value your opinion. Please leave your feedback below!</p>
<form class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="name">Name</label>
<input id="name" type="text" placeholder="Your Name" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" required />
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="email">Email</label>
<input id="email" type="email" placeholder="Your Email" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" required />
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="rating">Rating</label>
<select id="rating" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" required>
<option value="5">⭐⭐⭐⭐⭐</option>
<option value="4">⭐⭐⭐⭐</option>
<option value="3">⭐⭐⭐</option>
<option value="2">⭐⭐</option>
<option value="1">⭐</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="message">Message</label>
<textarea id="message" rows="4" placeholder="Your Feedback" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" required></textarea>
</div>
<div>
<button type="submit" class="w-full py-2 px-4 bg-pink-500 text-white font-semibold rounded-md shadow-md hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-pink-500 dark:bg-pink-600 dark:hover:bg-pink-700">Submit Feedback</button>
</div>
</form>
<div class="mt-6 flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="h-10 w-10 rounded-full">
<span class="text-gray-600 dark:text-gray-400">John Doe</span>
</div>
<div class="mt-4 text-sm text-gray-500 dark:text-gray-400">
<p>Feedback received on: <span class="text-gray-800 dark:text-gray-200">10/23/2023</span></p>
</div>
</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.
OrganicoNaturaIspiratoFeedbackComponente
Un componente di feedback di complessità moderata per siti web di notizie/giornalismo, caratterizzato da un design organico/ispirato alla natura. Utilizza una combinazione di colori in bianco e nero con un accento luminoso, è completamente reattivo e supporta la modalità oscura.
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.