Composant Composants de rétroaction
Un composant de feedback simple et réactif adapté aux sites Web de conseil/services, avec une palette de couleurs triadique et des principes de conception de micro-interaction. Inclut la prise en charge du mode sombre.
HTML Code
<div class="font-sans antialiased text-gray-900 bg-white dark:bg-gray-900 dark:text-gray-100 min-h-screen flex items-center justify-center p-4">
<div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:shadow-2xl">
<div class="p-6 sm:p-8 space-y-6">
<h2 class="text-2xl sm:text-3xl font-bold text-center text-indigo-700 dark:text-indigo-400 mb-4 tracking-tight">
We Value Your Feedback!
</h2>
<p class="text-center text-gray-600 dark:text-gray-300 leading-relaxed">
Help us improve our services by sharing your thoughts.
</p>
<form class="space-y-6">
<div>
<label for="feedback-type" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">
What type of feedback is this?
</label>
<div class="relative">
<select id="feedback-type" name="feedback-type" class="block w-full py-2 px-3 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm appearance-none transition-colors duration-200">
<option value="general">General Feedback</option>
<option value="suggestion">Suggestion</option>
<option value="bug">Bug Report</option>
<option value="compliment">Compliment</option>
<option value="other">Other</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 dark:text-gray-200">
<svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</div>
</div>
</div>
<div>
<label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">
Your Message
</label>
<textarea id="message" name="message" rows="4" class="block w-full py-2 px-3 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-teal-500 sm:text-sm transition-colors duration-200 placeholder-gray-400 dark:placeholder-gray-500" placeholder="Tell us what's on your mind..."></textarea>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">How would you rate your experience?</label>
<div class="flex justify-center space-x-2">
<button type="button" class="rating-btn group flex flex-col items-center justify-center p-2 rounded-lg transition-all duration-200 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 border border-transparent hover:border-orange-400 dark:hover:border-orange-600">
<span class="text-2xl lg:text-3xl transition-transform duration-200 group-hover:-translate-y-1 group-active:translate-y-0">😡</span>
<span class="text-xs text-gray-500 dark:text-gray-400 group-hover:text-orange-600 dark:group-hover:text-orange-400 mt-1">Poor</span>
</button>
<button type="button" class="rating-btn group flex flex-col items-center justify-center p-2 rounded-lg transition-all duration-200 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 border border-transparent hover:border-orange-400 dark:hover:border-orange-600">
<span class="text-2xl lg:text-3xl transition-transform duration-200 group-hover:-translate-y-1 group-active:translate-y-0">😐</span>
<span class="text-xs text-gray-500 dark:text-gray-400 group-hover:text-orange-600 dark:group-hover:text-orange-400 mt-1">Okay</span>
</button>
<button type="button" class="rating-btn group flex flex-col items-center justify-center p-2 rounded-lg transition-all duration-200 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 border border-transparent hover:border-orange-400 dark:hover:border-orange-600">
<span class="text-2xl lg:text-3xl transition-transform duration-200 group-hover:-translate-y-1 group-active:translate-y-0">😊</span>
<span class="text-xs text-gray-500 dark:text-gray-400 group-hover:text-orange-600 dark:group-hover:text-orange-400 mt-1">Good</span>
</button>
</div>
</div>
<button type="submit" class="w-full flex items-center justify-center px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 transition-all duration-200 transform hover:-translate-y-0.5 active:translate-y-0 active:scale-98">
<svg class="-ml-1 mr-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
Submit Feedback
</button>
</form>
</div>
</div>
</div>Composants associés
Composant Composants de rétroaction
Un simple composant de retour brutaliste avec des couleurs en niveaux de gris, une prise en charge du mode sombre et un design réactif.
Composant Composants de rétroaction
Il s’agit d’un composant de feedback complexe, réactif et pris en charge par un thème sombre pour un tableau de bord, conçu avec une esthétique minimaliste/plate et une palette de couleurs pastel. Il affiche divers éléments de retour d’information tels qu’une barre de progression, des indicateurs d’état et une activité récente, en utilisant uniquement du HTML avec des classes CSS Tailwind.
Vibrant_Dark_Mode_Feedback_Component
Un composant de retour d’information simple et dynamique conçu pour les plateformes de divertissement/médias avec une interface utilisateur en mode sombre pour réduire la fatigue oculaire. Il comporte un titre bien visible, une sous-description et un bouton d’appel à l’action, tous entièrement réactifs.