Composante de rétroaction
Un composant de rétroaction réactif qui intègre des micro-interactions avec des animations attrayantes. Il est conçu pour prendre en charge le mode sombre et comporte des éléments pour les commentaires de l’utilisateur avec des images et des avatars de remplacement.
HTML Code
<div class="flex flex-col items-center p-5 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
<h2 class="text-lg font-semibold dark:text-white mb-4">We Value Your Feedback!</h2>
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
<textarea class="ml-3 w-full h-24 p-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-shadow duration-200 ease-in-out" placeholder="Share your thoughts..."></textarea>
</div>
<div class="flex justify-between w-full">
<button class="bg-blue-600 text-white font-semibold py-2 px-4 rounded-md transition-transform transform hover:scale-105 duration-200 ease-in-out">Submit</button>
<button class="bg-gray-300 text-gray-700 font-semibold py-2 px-4 rounded-md hover:bg-gray-400 transition-colors duration-200 ease-in-out dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600">Cancel</button>
</div>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-3">Your feedback helps us improve!</p>
</div>Composants associés
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.
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.
Composant Composants de rétroaction
Un composant de retour d’information de style brutaliste avec une palette de couleurs pastel, une complexité modérée et un design réactif avec prise en charge du thème sombre. Conçu pour un portfolio afin de présenter des commentaires ou des témoignages.