Componente de retroalimentación

<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>