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
Il s’agit d’un composant complexe inspiré de Material Design pour les plates-formes de forum/communauté, avec plusieurs éléments interactifs, une palette de couleurs complémentaire et une réactivité totale avec prise en charge du mode sombre.
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.
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.