피드백 구성 요소

매력적인 애니메이션과 마이크로 상호 작용을 통합하는 반응형 피드백 구성 요소입니다. 다크 모드를 지원하도록 설계되었으며 자리 표시자 이미지 및 아바타와 함께 사용자 피드백을 위한 요소를 제공합니다.

미리 보기

HTML 코드

<div class="flex flex-col items-center p-5 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
  <h2 class="text-lg font-semibold dark:text-white mb-4">We Value Your Feedback!</h2>
  <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 shadow-md">
    <textarea class="ml-3 w-full h-24 p-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-shadow duration-200 ease-in-out" placeholder="Share your thoughts..."></textarea>
  </div>
  <div class="flex justify-between w-full">
    <button class="bg-blue-600 text-white font-semibold py-2 px-4 rounded-md transition-transform transform hover:scale-105 duration-200 ease-in-out">Submit</button>
    <button class="bg-gray-300 text-gray-700 font-semibold py-2 px-4 rounded-md hover:bg-gray-400 transition-colors duration-200 ease-in-out dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600">Cancel</button>
  </div>
  <p class="text-sm text-gray-500 dark:text-gray-400 mt-3">Your feedback helps us improve!</p>
</div>

관련 구성 요소

피드백 구성 요소

소셜 네트워킹 인터페이스용으로 설계된 반응형 피드백 구성 요소로, 다크 모드를 지원하는 그레이스케일 색 구성표에 3D 디자인 요소를 통합하고 중간 정도의 복잡성과 상호 작용에 맞게 조정되었습니다.

열다

피드백 구성 요소

반응형 디자인, 어두운 테마 지원 및 JavaScript 없음을 특징으로 하는 미니멀리스트 피드백 구성 요소입니다. 여기에는 아바타, 사용자 피드백 텍스트 및 별표로 표시되는 등급이 포함됩니다.

열다

Feedback Components 구성 요소

평가 척도와 댓글을 위한 텍스트 영역을 특징으로 하는 피드백 구성 요소로, 반응형 디자인과 어두운 테마를 지원합니다.

열다