CCHub Logo CCHub Tailwind Collection
구성 요소 등급 시스템 Bauhaus_Grayscale_Rating_System_Component

Bauhaus_Grayscale_Rating_System_Component

Bauhaus 스타일로 회색조 색상으로 설계된 복잡하고 반응이 빠른 평가 시스템 구성 요소로, 이벤트 및 컨퍼런스 웹 사이트에 적합합니다. 대화형 요소와 다크 모드 지원이 특징입니다.

미리 보기

HTML 코드 

<div class="p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-all duration-300 ease-in-out">
    <div class="p-6 sm:p-8 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2 leading-tight tracking-tight text-center sm:text-left">
        Rate Your Experience at &ldquo;FutureTech Summit 2024&rdquo;
      </h2>
      <p class="text-md text-gray-600 dark:text-gray-400 text-center sm:text-left">
        Your feedback helps us improve future events. Please select your ratings below.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6 sm:p-8">

      <!-- Overall Satisfaction -->
      <div class="flex flex-col border border-gray-300 dark:border-gray-600 rounded-md p-5 bg-gray-100 dark:bg-gray-750 transform transition-transform duration-200 hover:scale-[1.02] active:scale-100">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Overall Satisfaction</h3>
        <div class="flex justify-center items-center space-x-2 sm:space-x-4 mb-4">
          <!-- Star 1 -->
          <div class="relative group">
            <input type="radio" id="overall-star-1" name="overall-satisfaction" class="hidden peer" value="1">
            <label for="overall-star-1" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100" title="Terrible">&#9733;</label>
          </div>
          <!-- Star 2 -->
          <div class="relative group">
            <input type="radio" id="overall-star-2" name="overall-satisfaction" class="hidden peer" value="2">
            <label for="overall-star-2" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100" title="Poor">&#9733;</label>
          </div>
          <!-- Star 3 -->
          <div class="relative group">
            <input type="radio" id="overall-star-3" name="overall-satisfaction" class="hidden peer" value="3">
            <label for="overall-star-3" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100" title="Average">&#9733;</label>
          </div>
          <!-- Star 4 -->
          <div class="relative group">
            <input type="radio" id="overall-star-4" name="overall-satisfaction" class="hidden peer" value="4">
            <label for="overall-star-4" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100" title="Good">&#9733;</label>
          </div>
          <!-- Star 5 -->
          <div class="relative group">
            <input type="radio" id="overall-star-5" name="overall-satisfaction" class="hidden peer" value="5">
            <label for="overall-star-5" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100" title="Excellent">&#9733;</label>
          </div>
        </div>
        <p class="text-sm text-gray-500 dark:text-gray-400 text-center">How would you rate your overall experience?</p>
      </div>

      <!-- Content Quality -->
      <div class="flex flex-col border border-gray-300 dark:border-gray-600 rounded-md p-5 bg-gray-100 dark:bg-gray-750 transform transition-transform duration-200 hover:scale-[1.02] active:scale-100">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Content Quality</h3>
        <div class="flex justify-center items-center space-x-2 sm:space-x-4 mb-4">
          <div class="relative group">
            <input type="radio" id="content-star-1" name="content-quality" class="hidden peer" value="1">
            <label for="content-star-1" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="content-star-2" name="content-quality" class="hidden peer" value="2">
            <label for="content-star-2" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="content-star-3" name="content-quality" class="hidden peer" value="3">
            <label for="content-star-3" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="content-star-4" name="content-quality" class="hidden peer" value="4">
            <label for="content-star-4" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="content-star-5" name="content-quality" class="hidden peer" value="5">
            <label for="content-star-5" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
        </div>
        <p class="text-sm text-gray-500 dark:text-gray-400 text-center">How valuable was the session content?</p>
      </div>

      <!-- Speaker Engagement -->
      <div class="flex flex-col border border-gray-300 dark:border-gray-600 rounded-md p-5 bg-gray-100 dark:bg-gray-750 transform transition-transform duration-200 hover:scale-[1.02] active:scale-100">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Speaker Engagement</h3>
        <div class="flex justify-center items-center space-x-2 sm:space-x-4 mb-4">
          <div class="relative group">
            <input type="radio" id="speaker-star-1" name="speaker-engagement" class="hidden peer" value="1">
            <label for="speaker-star-1" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="speaker-star-2" name="speaker-engagement" class="hidden peer" value="2">
            <label for="speaker-star-2" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="speaker-star-3" name="speaker-engagement" class="hidden peer" value="3">
            <label for="speaker-star-3" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="speaker-star-4" name="speaker-engagement" class="hidden peer" value="4">
            <label for="speaker-star-4" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="speaker-star-5" name="speaker-engagement" class="hidden peer" value="5">
            <label for="speaker-star-5" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
        </div>
        <p class="text-sm text-gray-500 dark:text-gray-400 text-center">How engaging and clear were the speakers?</p>
      </div>

      <!-- Venue & Logistics -->
      <div class="flex flex-col border border-gray-300 dark:border-gray-600 rounded-md p-5 bg-gray-100 dark:bg-gray-750 transform transition-transform duration-200 hover:scale-[1.02] active:scale-100">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Venue & Logistics</h3>
        <div class="flex justify-center items-center space-x-2 sm:space-x-4 mb-4">
          <div class="relative group">
            <input type="radio" id="venue-star-1" name="venue-logistics" class="hidden peer" value="1">
            <label for="venue-star-1" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="venue-star-2" name="venue-logistics" class="hidden peer" value="2">
            <label for="venue-star-2" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="venue-star-3" name="venue-logistics" class="hidden peer" value="3">
            <label for="venue-star-3" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="venue-star-4" name="venue-logistics" class="hidden peer" value="4">
            <label for="venue-star-4" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="venue-star-5" name="venue-logistics" class="hidden peer" value="5">
            <label for="venue-star-5" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
        </div>
        <p class="text-sm text-gray-500 dark:text-gray-400 text-center">How was the venue and event organization?</p>
      </div>

      <!-- Networking Opportunities -->
      <div class="flex flex-col border border-gray-300 dark:border-gray-600 rounded-md p-5 bg-gray-100 dark:bg-gray-750 transform transition-transform duration-200 hover:scale-[1.02] active:scale-100">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Networking Opportunities</h3>
        <div class="flex justify-center items-center space-x-2 sm:space-x-4 mb-4">
          <div class="relative group">
            <input type="radio" id="network-star-1" name="networking-opportunities" class="hidden peer" value="1">
            <label for="network-star-1" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="network-star-2" name="networking-opportunities" class="hidden peer" value="2">
            <label for="network-star-2" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="network-star-3" name="networking-opportunities" class="hidden peer" value="3">
            <label for="network-star-3" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="network-star-4" name="networking-opportunities" class="hidden peer" value="4">
            <label for="network-star-4" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="network-star-5" name="networking-opportunities" class="hidden peer" value="5">
            <label for="network-star-5" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
        </div>
        <p class="text-sm text-gray-500 dark:text-gray-400 text-center">Were there sufficient networking chances?</p>
      </div>

      <!-- Value for Money -->
      <div class="flex flex-col border border-gray-300 dark:border-gray-600 rounded-md p-5 bg-gray-100 dark:bg-gray-750 transform transition-transform duration-200 hover:scale-[1.02] active:scale-100">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Value for Money</h3>
        <div class="flex justify-center items-center space-x-2 sm:space-x-4 mb-4">
          <div class="relative group">
            <input type="radio" id="value-star-1" name="value-for-money" class="hidden peer" value="1">
            <label for="value-star-1" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="value-star-2" name="value-for-money" class="hidden peer" value="2">
            <label for="value-star-2" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="value-star-3" name="value-for-money" class="hidden peer" value="3">
            <label for="value-star-3" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="value-star-4" name="value-for-money" class="hidden peer" value="4">
            <label for="value-star-4" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="value-star-5" name="value-for-money" class="hidden peer" value="5">
            <label for="value-star-5" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
        </div>
        <p class="text-sm text-gray-500 dark:text-gray-400 text-center">Did the event offer good value for its cost?</p>
      </div>

    </div>

    <div class="p-6 sm:p-8 border-t border-gray-200 dark:border-gray-700">
      <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Additional Feedback</h3>
      <textarea class="w-full p-3 sm:p-4 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400 resize-y min-h-[100px] transition-colors duration-200" placeholder="Please share any other thoughts or suggestions..."></textarea>

      <div class="mt-6 flex justify-end">
        <button type="submit" class="px-6 py-3 bg-black text-white font-semibold rounded-md shadow-md hover:bg-gray-800 dark:bg-gray-200 dark:text-gray-900 dark:hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-gray-300 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900 transition-all duration-300 ease-in-out transform hover:scale-[1.02] active:scale-100">
          Submit Feedback
        </button>
      </div>
    </div>
  </div>
</div>

관련 구성 요소

등급 시스템 구성 요소

Retro/Vintage Rating System Complementary Color Scheme을 사용한 전자 상거래를 위한 구성 요소.Dark Mode 지원으로 반응형. JavaScript가 필요하지 않으며 Tailwind CSS가 있는 HTML만 있으면 됩니다.

열다

레트로 레이팅 시스템 구성 요소

전자 상거래를 위한 간단한 레트로 스타일의 등급 시스템 구성 요소로, Tailwind CSS를 사용하여 생생한 색상과 어두운 테마를 지원합니다.

열다

Brutalism_Travel_Rating_System

여행 및 관광 웹사이트를 위한 단순하고 야만적인 스타일의 평가 시스템 구성 요소로, 멋진 중립 및 다크 모드 지원을 특징으로 합니다.

열다