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 brutaliste
Un composant de feedback brutaliste avec un contraste élevé et une typographie audacieuse.
Composante de rétroaction
Un composant de retour réactif conçu selon les principes de Material Design, incorporant des tons de terre et équipé pour la prise en charge du mode sombre. Ce composant est spécialement conçu pour les tableaux de bord et comporte divers éléments interactifs.
Organic_Nature_Inspired_Food_Feedback_Component
Un composant de retour d’information de complexité modérée pour les sites Web d’alimentation/restaurant, avec un design organique/inspiré de la nature avec des tons de terre et une réactivité totale, y compris la prise en charge du mode sombre.