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

등급 시스템 구성 요소 24

어두운 테마와 반응형 효과를 지원하는 3D 디자인 등급 시스템 구성 요소입니다. 이 구성 요소에는 등급에 대한 별, 사용자 아바타 및 댓글 섹션이 있습니다.

미리 보기

HTML 코드 

<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <div class="p-6">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full shadow-md border-2 border-white" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
            <div class="ml-4">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h2>
                <p class="text-sm text-gray-600 dark:text-gray-400">5 minutes ago</p>
            </div>
        </div>
        <div class="flex mt-4 space-x-1">
            <svg class="w-6 h-6 text-yellow-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 14.97 22 10.91 15.82 10.36 12 4 8.18 10.36 2 10.91 7.46 14.97 5.82 21z" /></svg>
            <svg class="w-6 h-6 text-yellow-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 14.97 22 10.91 15.82 10.36 12 4 8.18 10.36 2 10.91 7.46 14.97 5.82 21z" /></svg>
            <svg class="w-6 h-6 text-yellow-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 14.97 22 10.91 15.82 10.36 12 4 8.18 10.36 2 10.91 7.46 14.97 5.82 21z" /></svg>
            <svg class="w-6 h-6 text-yellow-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 14.97 22 10.91 15.82 10.36 12 4 8.18 10.36 2 10.91 7.46 14.97 5.82 21z" /></svg>
            <svg class="w-6 h-6 text-gray-300" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 14.97 22 10.91 15.82 10.36 12 4 8.18 10.36 2 10.91 7.46 14.97 5.82 21z" /></svg>
        </div>
        <div class="mt-4">
            <p class="text-gray-700 dark:text-gray-300">This is a quick comment about the rating. Engaging and insightful feedback to enhance the user experience.</p>
        </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 p-4">
        <h3 class="text-md font-semibold text-gray-800 dark:text-white">Related Image</h3>
        <img class="mt-2 rounded-lg shadow-md" src="https://picsum.photos/400/200" alt="Placeholder Image" />
    </div>
</div>

관련 구성 요소

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

어스 톤의 레트로/빈티지 등급 시스템 구성 요소로, 비즈니스/기업 웹사이트용으로 설계되었습니다. 반응형 디자인과 어두운 테마를 지원합니다.

열다

등급 시스템 구성 요소

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

열다

등급 시스템 구성 요소

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

열다