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 “FutureTech Summit 2024”
</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">★</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">★</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">★</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">★</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">★</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">★</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">★</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">★</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">★</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">★</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">★</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">★</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">★</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">★</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">★</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">★</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">★</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">★</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">★</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">★</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">★</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">★</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">★</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">★</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">★</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">★</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">★</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">★</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">★</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">★</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>관련 구성 요소
Bauhaus 파스텔 등급 시스템 구성 요소
기하학적 형태와 파스텔 색상을 가진 반응형이고 기능적인 평가 시스템 구성 요소로, 대시보드 통합에 적합합니다. 다크 모드 지원이 포함됩니다.
등급 시스템 구성 요소
날씨/기후 데이터를 위해 설계된 사탕/달콤한 색 구성표가 있는 깔끔하고 미니멀한 등급 시스템 구성 요소입니다. 그리드 시스템을 사용하고 완전한 응답성과 다크 모드 지원으로 타이포그래피를 강조합니다.
등급 시스템 구성 요소
Tailwind CSS를 사용하여 Brutalism 스타일로 설계된 반응형 등급 시스템 구성 요소입니다. 어두운 테마를 지원하며 원시적이고 대담한 디자인으로 높은 대비를 가지고 있습니다.