Feedback Components Component
Minimalist/Flat Design Feedback Component for Dashboard with Complementary Color Scheme and Moderate Complexity, Responsive and Dark Theme Support. Uses HTML and Tailwind CSS. No JavaScript. Features interactive elements. Images from picsum.photos and avatars from randomuser.me.
HTML Code
<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>Related Components
Feedback Component
A feedback component designed for social media interfaces, incorporating microinteractions and a grayscale color scheme, with dark theme support.
Feedback Components Component
A feedback component featuring a rating scale and a text area for comments, with responsive design and dark theme support.
Feedback Component
A minimalist feedback component featuring responsive design, dark theme support, and no JavaScript. It includes an avatar, user feedback text, and ratings represented by stars.