Composant Composants de rétroaction
Un composant de rétroaction comprenant une échelle d’évaluation et une zone de texte pour les commentaires, avec un design réactif et une prise en charge du thème sombre.
HTML Code
<div class="container mx-auto p-4 md:p-8 bg-gray-100 dark:bg-gray-800 shadow-lg rounded-lg">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Leave Feedback</h2>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2" for="rating">
Overall Rating
</label>
<div class="flex items-center">
<input type="radio" name="rating" id="rating-5" class="hidden" value="5" />
<label for="rating-5" class="text-3xl text-gray-400 dark:text-gray-600 cursor-pointer select-none hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200">★</label>
<input type="radio" name="rating" id="rating-4" class="hidden" value="4" />
<label for="rating-4" class="text-3xl text-gray-400 dark:text-gray-600 cursor-pointer select-none hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200">★</label>
<input type="radio" name="rating" id="rating-3" class="hidden" value="3" />
<label for="rating-3" class="text-3xl text-gray-400 dark:text-gray-600 cursor-pointer select-none hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200">★</label>
<input type="radio" name="rating" id="rating-2" class="hidden" value="2" />
<label for="rating-2" class="text-3xl text-gray-400 dark:text-gray-600 cursor-pointer select-none hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200">★</label>
<input type="radio" name="rating" id="rating-1" class="hidden" value="1" />
<label for="rating-1" class="text-3xl text-gray-400 dark:text-gray-600 cursor-pointer select-none hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200">★</label>
</div>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2" for="comment">
Your Feedback
</label>
<textarea id="comment" name="comment" rows="4" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-white dark:bg-gray-700 dark:border-gray-600" placeholder="Tell us about your experience..."></textarea>
</div>
<div class="flex items-center justify-between">
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline dark:bg-blue-700 dark:hover:bg-blue-900" type="button">
Submit Feedback
</button>
</div>
</div>Composants associés
Composante de rétroaction
Un composant de feedback réactif conçu pour le mode sombre avec des couleurs vives, idéal pour la consommation de blogs et de contenu.
Neon_Glow_Feedback_Component
Un composant de retour d’information conçu pour le conseil/les services avec une esthétique néon/lueur utilisant une palette de couleurs analogue. Les fonctionnalités incluent des boutons lumineux, des dégradés d’arrière-plan subtils et la prise en charge du mode sombre.
Composante de rétroaction
Il s’agit d’un composant de feedback minimaliste doté d’un design réactif, d’une prise en charge du thème sombre et de l’absence de JavaScript. Il comprend un avatar, un texte de commentaires d’utilisateur et des évaluations représentées par des étoiles.