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.
HTML Code
<div class="max-w-3xl mx-auto p-6 bg-gray-800 dark:bg-gray-900 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold text-white mb-4">Feedback</h2>
<div class="mb-4">
<textarea class="w-full p-3 bg-gray-700 dark:bg-gray-800 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-violet-500" rows="4" placeholder="Leave your feedback here..."></textarea>
</div>
<div class="flex items-center mb-6">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<span class="text-white font-medium">John Doe</span>
</div>
<div class="flex justify-between">
<button class="px-4 py-2 bg-violet-600 hover:bg-violet-500 text-white font-semibold rounded-lg focus:outline-none focus:ring-2 focus:ring-violet-500">Submit</button>
<button class="px-4 py-2 bg-gray-600 hover:bg-gray-500 text-white font-semibold rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-500">Cancel</button>
</div>
</div>
<div class="max-w-3xl mx-auto mt-8 p-6 bg-gray-800 dark:bg-gray-900 rounded-lg shadow-lg">
<h3 class="text-xl font-bold text-white mb-4">Previous Feedback</h3>
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div class="flex-1">
<p class="text-white">Amazing content! I loved the insights shared in this article.</p>
<span class="text-gray-400 text-sm">Posted on Nov 12, 2023</span>
</div>
</div>
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div class="flex-1">
<p class="text-white">Great reading experience. Looking forward to more articles!</p>
<span class="text-gray-400 text-sm">Posted on Nov 11, 2023</span>
</div>
</div>
</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.
Composant Composants de rétroaction
Il s’agit d’un composant de commentaires minimaliste conçu pour le commerce électronique, avec des couleurs pastel douces, un design réactif et la prise en charge des thèmes sombres. Le composant comprend un formulaire de commentaires avec des champs de saisie, un système d’évaluation et un bouton d’envoi, le tout stylisé avec Tailwind CSS.
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.