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
Un componente Feedback Components complesso, reattivo e supportato da temi scuri per una dashboard, progettato con un'estetica minimalista/piatta e una combinazione di colori pastello. Visualizza vari elementi di feedback come una barra di avanzamento, indicatori di stato e attività recenti, utilizzando solo HTML con le classi CSS di Tailwind.
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.
Componenti di feedback
Un complesso componente di feedback progettato per siti Web aziendali/aziendali in modalità oscura, utilizzando una combinazione di colori complementare.