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

등급 시스템 구성 요소

Tailwind CSS를 사용하여 Brutalism 스타일로 설계된 반응형 등급 시스템 구성 요소입니다. 어두운 테마를 지원하며 원시적이고 대담한 디자인으로 높은 대비를 가지고 있습니다.

미리 보기

HTML 코드 

<div class="max-w-sm mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Rate Us!</h2>
    <p class="text-gray-600 dark:text-gray-400 mb-4">Your feedback is valuable to us!</p>
    <div class="flex items-center justify-center mb-4">
        <img src="https://picsum.photos/100/100" alt="Random User" class="rounded-full border-2 border-gray-800 dark:border-white">
        <span class="ml-3 text-lg text-gray-800 dark:text-white">User Name</span>
    </div>
    <div class="flex justify-center">
        <span class="text-5xl text-yellow-400 cursor-pointer hover:text-yellow-500 transition duration-200">★</span>
        <span class="text-5xl text-yellow-400 cursor-pointer hover:text-yellow-500 transition duration-200">★</span>
        <span class="text-5xl text-yellow-400 cursor-pointer hover:text-yellow-500 transition duration-200">★</span>
        <span class="text-5xl text-yellow-400 cursor-pointer hover:text-yellow-500 transition duration-200">★</span>
        <span class="text-5xl text-yellow-400 cursor-pointer hover:text-yellow-500 transition duration-200">★</span>
    </div>
    <div class="mt-4">
        <button class="w-full bg-gray-800 dark:bg-yellow-400 text-white py-2 rounded-md font-bold hover:bg-yellow-500 transition duration-200">Submit Rating</button>
    </div>
</div>
<style>
    @media (prefers-color-scheme: dark) {
        .dark:hover\:bg-yellow-500:hover {
            background-color: #bb8d29;
        }
    }
</style>

관련 구성 요소

Neumorphic Vibrant Rating 시스템 구성 요소

Neumorphic 스타일과 생생한 색 구성표로 설계된 복잡한 대화형 평가 시스템 구성 요소로, 포럼 및 커뮤니티 플랫폼에 적합합니다. 여기에는 별 등급, 업/다운 투표, 숫자 디스플레이가 포함되며 완전한 응답성과 다크 모드를 지원합니다.

열다

Monospace_Developer_Autumn_Rating_System_Component

모노스페이스에서 영감을 받은 복잡한 등급 시스템 구성 요소로, 산업 및 제조 응용 분야를 위한 가을 색이 있습니다. 깔끔한 디자인, 다양한 인터랙티브 요소, 완벽한 응답성 및 다크 모드 지원이 특징입니다.

열다

등급 시스템 구성 요소

풍부한 보석 색조로 설계된 간단하고 매력적인 평가 시스템 구성 요소로, 문서 및 기술 자료 사이트에 대한 마이크로 인터랙션 피드백을 제공합니다. 완벽하게 반응하며 다크 모드를 지원합니다.

열다