Feedback Components 组件
用于仪表板的复杂、响应式、支持深色主题的反馈组件组件，采用极简/扁平美学和柔和的配色方案设计。它显示各种反馈元素，例如进度条、状态指示器和最近的活动，仅将 HTML 与 Tailwind CSS 类结合使用。
HTML 代码
<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>