피드백 구성 요소
소셜 미디어 인터페이스를 위해 설계된 피드백 구성 요소로, 마이크로 인터랙션과 회색조 색 구성표를 통합하고 어두운 테마를 지원합니다.
HTML 코드
<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>