HTML 代码
<div class="max-w-3xl mx-auto p-6 bg-gray-800 dark:bg-gray-900 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold text-white mb-4">Feedback</h2>
<div class="mb-4">
<textarea class="w-full p-3 bg-gray-700 dark:bg-gray-800 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-violet-500" rows="4" placeholder="Leave your feedback here..."></textarea>
</div>
<div class="flex items-center mb-6">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<span class="text-white font-medium">John Doe</span>
</div>
<div class="flex justify-between">
<button class="px-4 py-2 bg-violet-600 hover:bg-violet-500 text-white font-semibold rounded-lg focus:outline-none focus:ring-2 focus:ring-violet-500">Submit</button>
<button class="px-4 py-2 bg-gray-600 hover:bg-gray-500 text-white font-semibold rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-500">Cancel</button>
</div>
</div>
<div class="max-w-3xl mx-auto mt-8 p-6 bg-gray-800 dark:bg-gray-900 rounded-lg shadow-lg">
<h3 class="text-xl font-bold text-white mb-4">Previous Feedback</h3>
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div class="flex-1">
<p class="text-white">Amazing content! I loved the insights shared in this article.</p>
<span class="text-gray-400 text-sm">Posted on Nov 12, 2023</span>
</div>
</div>
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div class="flex-1">
<p class="text-white">Great reading experience. Looking forward to more articles!</p>
<span class="text-gray-400 text-sm">Posted on Nov 11, 2023</span>
</div>
</div>
</div>