Feedback Component

<div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md transition-transform transform hover:scale-105">
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
        <div>
            <p class="font-semibold text-gray-900 dark:text-gray-100">John Doe</p>
            <p class="text-gray-600 dark:text-gray-400 text-sm">2 hours ago</p>
        </div>
    </div>
    <p class="text-gray-800 dark:text-gray-200 mb-4">This is a feedback message that users can read and respond to. It’s engaging and has small animations to enhance interaction.</p>
    <div class="flex space-x-4">
        <button class="text-blue-500 dark:text-blue-300 hover:underline transition-all duration-300">Like</button>
        <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-all duration-300">Reply</button>
        <button class="text-red-500 dark:text-red-300 hover:underline transition-all duration-300">Report</button>
    </div>
</div>

<div class="p-4 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-md mt-6">
    <h2 class="font-semibold text-gray-800 dark:text-gray-200 mb-2">Leave a Comment:</h2>
    <textarea class="w-full h-24 p-2 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300 transition-all duration-300" placeholder="Write your comment..." required></textarea>
    <div class="flex justify-end mt-2">
        <button class="bg-blue-600 dark:bg-blue-500 text-white rounded-lg px-4 py-2 transition-all duration-300 hover:bg-blue-700 dark:hover:bg-blue-400">Submit</button>
    </div>
</div>

<div class="flex justify-center mt-4">
    <img src="https://picsum.photos/300/200?random=1" alt="Random Image" class="rounded-lg shadow-lg">
</div>