Neumorphic Vibrant Rating 시스템 구성 요소
Neumorphic 스타일과 생생한 색 구성표로 설계된 복잡한 대화형 평가 시스템 구성 요소로, 포럼 및 커뮤니티 플랫폼에 적합합니다. 여기에는 별 등급, 업/다운 투표, 숫자 디스플레이가 포함되며 완전한 응답성과 다크 모드를 지원합니다.
HTML 코드
<div class="p-6 sm:p-8 md:p-10 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-900 dark:to-gray-800 min-h-screen flex items-center justify-center font-sans">
<div class="w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl mx-auto rounded-3xl shadow-xl space-y-8 p-6 sm:p-8 md:p-10
bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-850 dark:to-gray-750
dark:shadow-[inset_2px_2px_5px_#222,inset_-5px_-5px_10px_#444] shadow-[inset_2px_2px_5px_#dcdcdc,inset_-5px_-5px_15px_#ffffff]">
<div class="text-center">
<h2 class="text-2xl sm:text-3xl font-bold mb-2 text-purple-700 dark:text-purple-300">
Rate This Discussion!
</h2>
<p class="text-sm sm:text-base text-pink-600 dark:text-pink-200">
Your feedback helps the community grow.
</p>
</div>
<!-- Star Rating Section -->
<div class="flex justify-center items-center gap-2 sm:gap-3 lg:gap-4 p-4 sm:p-5 rounded-2xl
bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-800 dark:to-gray-700
shadow-[inset_2px_2px_5px_#e0e0e0,inset_-5px_-5px_10px_#ffffff] dark:shadow-[inset_2px_2px_5px_#222,inset_-5px_-5px_10px_#444]
relative border-t border-l border-white/50 dark:border-gray-600/50">
<!-- Each star is a 'button' for demonstration, in a real app these would be radio inputs or JS controlled -->
<div class="group relative cursor-pointer">
<svg class="w-8 h-8 sm:w-10 sm:h-10 text-yellow-400 opacity-60 hover:opacity-100 transition-all duration-200
group-hover:drop-shadow-[0_0_8px_rgba(252,211,77,0.7)] group-[.active]:opacity-100 group-[.active]:drop-shadow-[0_0_8px_rgba(252,211,77,0.7)]"
fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
<span class="absolute top-full left-1/2 -translate-x-1/2 mt-1 px-2 py-1 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-800 dark:to-gray-700 rounded-lg text-xs text-purple-700 dark:text-purple-300 opacity-0 group-hover:opacity-100 transition-opacity duration-200 shadow-md whitespace-nowrap">Terrible</span>
</div>
<div class="group relative cursor-pointer">
<svg class="w-8 h-8 sm:w-10 sm:h-10 text-yellow-400 opacity-60 hover:opacity-100 transition-all duration-200
group-hover:drop-shadow-[0_0_8px_rgba(252,211,77,0.7)] group-[.active]:opacity-100 group-[.active]:drop-shadow-[0_0_8px_rgba(252,211,77,0.7)]"
fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
<span class="absolute top-full left-1/2 -translate-x-1/2 mt-1 px-2 py-1 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-800 dark:to-gray-700 rounded-lg text-xs text-purple-700 dark:text-purple-300 opacity-0 group-hover:opacity-100 transition-opacity duration-200 shadow-md whitespace-nowrap">Bad</span>
</div>
<div class="group relative cursor-pointer">
<svg class="w-8 h-8 sm:w-10 sm:h-10 text-yellow-400 opacity-60 hover:opacity-100 transition-all duration-200
group-hover:drop-shadow-[0_0_8px_rgba(252,211,77,0.7)] group-[.active]:opacity-100 group-[.active]:drop-shadow-[0_0_8px_rgba(252,211,77,0.7)]"
fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
<span class="absolute top-full left-1/2 -translate-x-1/2 mt-1 px-2 py-1 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-800 dark:to-gray-700 rounded-lg text-xs text-purple-700 dark:text-purple-300 opacity-0 group-hover:opacity-100 transition-opacity duration-200 shadow-md whitespace-nowrap">Okay</span>
</div>
<div class="group relative cursor-pointer">
<svg class="w-8 h-8 sm:w-10 sm:h-10 text-yellow-400 opacity-60 hover:opacity-100 transition-all duration-200
group-hover:drop-shadow-[0_0_8px_rgba(252,211,77,0.7)] group-[.active]:opacity-100 group-[.active]:drop-shadow-[0_0_8px_rgba(252,211,77,0.7)]"
fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
<span class="absolute top-full left-1/2 -translate-x-1/2 mt-1 px-2 py-1 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-800 dark:to-gray-700 rounded-lg text-xs text-purple-700 dark:text-purple-300 opacity-0 group-hover:opacity-100 transition-opacity duration-200 shadow-md whitespace-nowrap">Good</span>
</div>
<div class="group relative cursor-pointer active">
<svg class="w-8 h-8 sm:w-10 sm:h-10 text-yellow-400 opacity-100 transition-all duration-200
drop-shadow-[0_0_8px_rgba(252,211,77,0.7)] !group-hover:opacity-100 !group-hover:drop-shadow-[0_0_8px_rgba(252,211,77,0.7)]"
fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
<span class="absolute top-full left-1/2 -translate-x-1/2 mt-1 px-2 py-1 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-800 dark:to-gray-700 rounded-lg text-xs text-purple-700 dark:text-purple-300 opacity-0 group-hover:opacity-100 transition-opacity duration-200 shadow-md whitespace-nowrap">Excellent</span>
</div>
</div>
<!-- Up/Down Voting Section -->
<div class="flex justify-center items-center gap-6 sm:gap-8 p-4 sm:p-5 rounded-2xl relative
bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-800 dark:to-gray-700
shadow-[inset_2px_2px_5px_#e0e0e0,inset_-5px_-5px_10px_#ffffff] dark:shadow-[inset_2px_2px_5px_#222,inset_-5px_-5px_10px_#444]
border-t border-l border-white/50 dark:border-gray-600/50">
<!-- Downvote Button -->
<button class="relative px-4 py-2 sm:px-6 sm:py-3 rounded-full group
bg-gradient-to-br from-pink-500 to-red-500 dark:from-pink-600 dark:to-red-600
shadow-[5px_5px_10px_#d0d0d0,-5px_-5px_10px_#ffffff] dark:shadow-[5px_5px_10px_#111,-5px_-5px_10px_#555]
text-white font-semibold flex items-center justify-center gap-2
hover:shadow-[inset_2px_2px_5px_#a0a0a0,inset_-5px_-5px_10px_#ffffff] dark:hover:shadow-[inset_2px_2px_5px_#222,inset_-5px_-5px_10px_#444]
transition-all duration-200 active:scale-95">
<svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path>
</svg>
<span class="text-sm sm:text-base">Downvote</span>
</button>
<!-- Score Display -->
<span class="text-4xl sm:text-5xl font-extrabold text-purple-700 dark:text-purple-300 drop-shadow-md">
+124
</span>
<!-- Upvote Button active -->
<button class="relative px-4 py-2 sm:px-6 sm:py-3 rounded-full active group
bg-gradient-to-br from-green-500 to-blue-500 dark:from-green-600 dark:to-blue-600
shadow-[inset_2px_2px_5px_#a0a0a0,inset_-5px_-5px_10px_#ffffff] dark:shadow-[inset_2px_2px_5px_#222,inset_-5px_-5px_10px_#444]
text-white font-semibold flex items-center justify-center gap-2
hover:shadow-[5px_5px_10px_#d0d0d0,-5px_-5px_10px_#ffffff] dark:hover:shadow-[5px_5px_10px_#111,-5px_-5px_10px_#555]
transition-all duration-200 active:scale-95">
<svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
<span class="text-sm sm:text-base">Upvote</span>
</button>
</div>
<!-- Comment/Submit Section -->
<div class="flex flex-col sm:flex-row gap-4">
<input type="text" placeholder="Add a quick comment..." class="flex-grow px-5 py-3 rounded-full
bg-purple-50 dark:bg-gray-700 text-purple-800 dark:text-white
shadow-[inset_2px_2px_5px_#d0d0d0,inset_-5px_-5px_10px_#ffffff] dark:shadow-[inset_2px_2px_5px_#222,inset_-5px_-5px_10px_#444]
focus:outline-none focus:ring-2 focus:ring-purple-400 dark:focus:ring-purple-500
placeholder-purple-400 dark:placeholder-gray-500 transition-all duration-200 text-sm sm:text-base">
<button class="px-6 py-3 rounded-full
bg-gradient-to-br from-purple-600 to-pink-600 dark:from-purple-700 dark:to-pink-700
shadow-[5px_5px_10px_#d0d0d0,-5px_-5px_10px_#ffffff] dark:shadow-[5px_5px_10px_#111,-5px_-5px_10px_#555]
text-white font-semibold flex items-center justify-center gap-2 transition-all duration-200
hover:scale-[1.02] hover:shadow-[7px_7px_14px_#c0c0c0,-7px_-7px_14px_#ffffff] dark:hover:shadow-[7px_7px_14px_#000,-7px_-7px_14px_#666]
active:scale-95 active:shadow-[inset_2px_2px_5px_#a0a0a0,inset_-5px_-5px_10px_#ffffff] dark:active:shadow-[inset_2px_2px_5px_#222,inset_-5px_-5px_10px_#444]">
Submit Rating
</button>
</div>
<p class="text-xs text-center text-gray-500 dark:text-gray-400 mt-6">
Average rating: <span class="font-bold text-indigo-700 dark:text-indigo-300">4.5/5</span> based on <span class="font-bold text-indigo-700 dark:text-indigo-300">2,345 votes</span>
</p>
</div>
<!-- Custom Dark Mode Toggle (for demonstration) -->
<div class="absolute top-4 right-4 flex items-center space-x-2">
<span class="text-gray-700 dark:text-gray-300 text-sm">Light</span>
<label for="dark-mode-toggle" class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" id="dark-mode-toggle" class="sr-only peer" onchange="document.documentElement.classList.toggle('dark')">
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-purple-600"></div>
</label>
<span class="text-gray-700 dark:text-gray-300 text-sm">Dark</span>
</div>
</div>
<style>
/* Custom CSS for Neumorphism background colors */
.dark .bg-gray-850 {
background-color: #1a1a1a; /* Deeper dark for neumorphism inset */
}
.dark .bg-gray-750 {
background-color: #2a2a2a; /* Lighter dark for neumorphism inset */
}
</style>관련 구성 요소
등급 시스템 구성 요소
소셜 미디어를 위한 복잡한 복고풍 테마의 등급 시스템 구성 요소로, 단색 색 구성표를 특징으로 합니다. 완벽하게 반응하며 다크 모드를 지원합니다. 이 구성 요소는 JavaScript 없이 HTML 및 Tailwind CSS만 사용합니다.
등급 시스템 구성 요소
Tailwind CSS를 사용하여 Brutalism 스타일로 설계된 반응형 등급 시스템 구성 요소입니다. 어두운 테마를 지원하며 원시적이고 대담한 디자인으로 높은 대비를 가지고 있습니다.