CCHub Logo CCHub Tailwind Collection
구성 요소 등급 시스템 브루탈리스트 등급 시스템 구성 요소

브루탈리스트 등급 시스템 구성 요소

Tailwind CSS를 사용하여 잔인한 스타일로 설계된 반응형 등급 시스템 구성 요소이며 어두운 테마를 지원합니다.

미리 보기

HTML 코드 

<div class="flex flex-col items-center bg-white dark:bg-gray-800 p-5 rounded-lg shadow-md w-80">
    <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4">Rate Us!</h2>
    <div class="flex items-center mb-5">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="rounded-full w-12 h-12 mr-3 border-2 border-gray-800 dark:border-gray-200">
        <span class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</span>
    </div>
    <div class="flex space-x-1 mb-4">
        <span class="cursor-pointer text-3xl text-yellow-500">★</span>
        <span class="cursor-pointer text-3xl text-yellow-500">★</span>
        <span class="cursor-pointer text-3xl text-yellow-500">★</span>
        <span class="cursor-pointer text-3xl text-gray-300 dark:text-gray-500">★</span>
        <span class="cursor-pointer text-3xl text-gray-300 dark:text-gray-500">★</span>
    </div>
    <textarea class="w-full h-24 p-2 border-2 border-gray-800 dark:border-gray-200 bg-transparent text-gray-800 dark:text-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-yellow-500" placeholder="Leave your feedback..."></textarea>
    <button class="mt-4 px-4 py-2 bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 font-semibold rounded-md hover:bg-gray-700 dark:hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-yellow-500">Submit</button>
</div>

관련 구성 요소

Bauhaus_Music_Rating_System

반응형 음악/오디오 등급 시스템 구성 요소로, Bauhaus에서 영감을 받은 디자인으로 보라색/보라색 색 구성표를 사용합니다. 다크 모드 지원 및 대화형 별 등급 기능(시각적인 만, JS 제외)이 포함됩니다.

열다

등급 시스템 구성 요소

세피아/브라운 톤, 다크 모드 지원 및 마이크로 인터랙션 중심 스타일을 갖춘 간단하고 반응이 빠른 등급 시스템 구성 요소로, 정부/공공 서비스 웹 사이트에 적합합니다.

열다

Skeuomorphic_Jewel_Tone_Rating_System_Simple

스큐어모픽 디자인, 보석 톤 색 구성표 및 다크 모드 지원을 갖춘 간단하고 반응이 빠른 등급 시스템 구성 요소로 비영리/자선 웹사이트에 적합합니다.

열다