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
Composante de rétroaction brutaliste
Un composant de feedback brutaliste avec un contraste élevé et une typographie audacieuse.
Composante de rétroaction
Un composant de retour d’information réactif conçu pour les interfaces de réseaux sociaux, incorporant des éléments de conception 3D dans une palette de couleurs en niveaux de gris avec prise en charge du mode sombre, adapté à la complexité moyenne et à l’interactivité.
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.