Feedback Components 组件
仪表板的极简/扁平化设计反馈组件，具有互补的配色方案和适度的复杂性、响应式和深色主题支持。使用 HTML 和 Tailwind CSS。无 JavaScript。具有互动元素。来自 picsum.photos 的图片和来自 randomuser.me 的头像。
HTML 代码
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
<div class="flex items-center justify-between mb-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">User Feedback</h2>
<span class="text-sm text-gray-500 dark:text-gray-400">Last 30 days</span>
</div>
<div class="space-y-4">
<div class="flex items-start space-x-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div class="flex-1">
<div class="flex items-center justify-between">
<h4 class="text-sm font-medium text-gray-900 dark:text-white">John Doe</h4>
<span class="text-xs text-gray-500 dark:text-gray-400">2 days ago</span>
</div>
<p class="text-sm text-gray-600 dark:text-gray-300">This dashboard is very helpful. The data is presented clearly.</p>
</div>
</div>
<div class="flex items-start space-x-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div class="flex-1">
<div class="flex items-center justify-between">
<h4 class="text-sm font-medium text-gray-900 dark:text-white">Jane Smith</h4>
<span class="text-xs text-gray-500 dark:text-gray-400">5 days ago</span>
</div>
<p class="text-sm text-gray-600 dark:text-gray-300">I love the new features! Especially the real-time updates.</p>
</div>
</div>
<div class="flex items-start space-x-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/19.jpg" alt="User Avatar">
<div class="flex-1">
<div class="flex items-center justify-between">
<h4 class="text-sm font-medium text-gray-900 dark:text-white">Peter Jones</h4>
<span class="text-xs text-gray-500 dark:text-gray-400">1 week ago</span>
</div>
<p class="text-sm text-gray-600 dark:text-gray-300">Could you add an option to export data as a CSV file?</p>
</div>
</div>
</div>
<div class="mt-6 flex justify-center">
<button class="px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:bg-indigo-700 dark:hover:bg-indigo-600 dark:focus:ring-offset-gray-800">View All Feedback</button>
</div>
</div>