CCHub Logo CCHub Tailwind Collection
구성 요소 피드백 구성 요소 Feedback Components 구성 요소

Feedback Components 구성 요소

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

미리 보기

HTML 코드 

<div class="container mx-auto p-4 md:p-8 bg-gray-100 dark:bg-gray-800 shadow-lg rounded-lg">
  <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Leave Feedback</h2>
  <div class="mb-4">
    <label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2" for="rating">
      Overall Rating
    </label>
    <div class="flex items-center">
      <input type="radio" name="rating" id="rating-5" class="hidden" value="5" />
      <label for="rating-5" class="text-3xl text-gray-400 dark:text-gray-600 cursor-pointer select-none hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200">★</label>
      <input type="radio" name="rating" id="rating-4" class="hidden" value="4" />
      <label for="rating-4" class="text-3xl text-gray-400 dark:text-gray-600 cursor-pointer select-none hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200">★</label>
      <input type="radio" name="rating" id="rating-3" class="hidden" value="3" />
      <label for="rating-3" class="text-3xl text-gray-400 dark:text-gray-600 cursor-pointer select-none hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200">★</label>
      <input type="radio" name="rating" id="rating-2" class="hidden" value="2" />
      <label for="rating-2" class="text-3xl text-gray-400 dark:text-gray-600 cursor-pointer select-none hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200">★</label>
      <input type="radio" name="rating" id="rating-1" class="hidden" value="1" />
      <label for="rating-1" class="text-3xl text-gray-400 dark:text-gray-600 cursor-pointer select-none hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200">★</label>
    </div>
  </div>
  <div class="mb-4">
    <label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2" for="comment">
      Your Feedback
    </label>
    <textarea id="comment" name="comment" rows="4" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-white dark:bg-gray-700 dark:border-gray-600" placeholder="Tell us about your experience..."></textarea>
  </div>
  <div class="flex items-center justify-between">
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline dark:bg-blue-700 dark:hover:bg-blue-900" type="button">
      Submit Feedback
    </button>
  </div>
</div>

관련 구성 요소

Feedback Components 구성 요소

그레이스케일 색상, 다크 모드 지원 및 반응형 디자인을 갖춘 간단한 브루탈리스트 피드백 구성 요소입니다.

열다

Memphis_Social_Media_Feedback_Component

Memphis 디자인이 따뜻한 중립 색상을 사용하여 영향을 미치는 간단하고 반응이 빠른 소셜 미디어 피드백 구성 요소에는 좋아요 버튼과 댓글 표시기가 있습니다. 다크 모드를 지원합니다.

열다

Feedback Components 구성 요소

전자 상거래를 위해 설계된 미니멀한 피드백 구성 요소로, 부드러운 파스텔 색상, 반응형 디자인 및 어두운 테마 지원을 특징으로 합니다. 구성 요소에는 입력 필드가 있는 피드백 양식, 등급 시스템 및 제출 버튼이 포함되어 있으며 모두 Tailwind CSS로 스타일이 지정되었습니다.

열다