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.
HTML Code
<div class="p-6 bg-white dark:bg-gray-800 shadow-lg rounded-lg">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-6">Feedback Overview</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
<!-- Positive Feedback -->
<div class="bg-gradient-to-r from-green-200 to-green-100 dark:from-green-700 dark:to-green-600 p-4 rounded-md flex items-center justify-between">
<div class="flex items-center">
<div class="p-3 bg-green-400 dark:bg-green-500 rounded-full mr-3">
<svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<p class="text-green-800 dark:text-green-100 font-medium">Positive Feedback</p>
</div>
<span class="text-green-800 dark:text-green-100 text-xl font-bold">85%</span>
</div>
<!-- Negative Feedback -->
<div class="bg-gradient-to-r from-red-200 to-red-100 dark:from-red-700 dark:to-red-600 p-4 rounded-md flex items-center justify-between">
<div class="flex items-center">
<div class="p-3 bg-red-400 dark:bg-red-500 rounded-full mr-3">
<svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</div>
<p class="text-red-800 dark:text-red-100 font-medium">Negative Feedback</p>
</div>
<span class="text-red-800 dark:text-red-100 text-xl font-bold">15%</span>
</div>
</div>
<!-- Feedback Progress Bar -->
<div class="mb-8">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-3">Overall Satisfaction</h3>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4">
<div class="bg-teal-400 h-4 rounded-full" style="width: 75%;"></div>
</div>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-2 text-right">75% Satisfied</p>
</div>
<!-- Recent Feedback Activity -->
<div>
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-4">Recent Activity</h3>
<ul class="space-y-4">
<li class="flex items-center">
<img class="h-10 w-10 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div class="flex-grow">
<p class="text-gray-800 dark:text-gray-100 font-medium">"Great service, very helpful!"</p>
<p class="text-sm text-gray-500 dark:text-gray-400">- Jane Doe <span class="ml-2 px-2 py-0.5 bg-green-100 dark:bg-green-700 text-green-700 dark:text-green-100 text-xs font-semibold rounded-full">Positive</span></p>
</div>
<span class="text-sm text-gray-400 dark:text-gray-500">2 hours ago</span>
</li>
<li class="flex items-center">
<img class="h-10 w-10 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div class="flex-grow">
<p class="text-gray-800 dark:text-gray-100 font-medium">"Room for improvement on delivery."</p>
<p class="text-sm text-gray-500 dark:text-gray-400">- John Smith <span class="ml-2 px-2 py-0.5 bg-yellow-100 dark:bg-yellow-700 text-yellow-700 dark:text-yellow-100 text-xs font-semibold rounded-full">Neutral</span></p>
</div>
<span class="text-sm text-gray-400 dark:text-gray-500">1 day ago</span>
</li>
<li class="flex items-center">
<img class="h-10 w-10 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/60.jpg" alt="User Avatar">
<div class="flex-grow">
<p class="text-gray-800 dark:text-gray-100 font-medium">"Not satisfied with the product quality."</p>
<p class="text-sm text-gray-500 dark:text-gray-400">- Emily White <span class="ml-2 px-2 py-0.5 bg-red-100 dark:bg-red-700 text-red-700 dark:text-red-100 text-xs font-semibold rounded-full">Negative</span></p>
</div>
<span class="text-sm text-gray-400 dark:text-gray-500">3 days ago</span>
</li>
</ul>
</div>
</div>Composants associés
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.
Composante de rétroaction brutaliste
Un composant de feedback brutaliste avec un contraste élevé et une typographie audacieuse.
Composant de rétroaction skeuomorphe (simple, tons de terre)
Un simple composant de retour d’information skeuomorphique pour un tableau de bord, utilisant des tons de terre et conçu pour imiter des éléments du monde réel. Entièrement réactif avec prise en charge du mode sombre.