CCHub Logo CCHub Tailwind Collection
구성 요소 피드백 구성 요소 피드백 구성 요소

피드백 구성 요소

반응형 디자인, 어두운 테마 지원 및 JavaScript 없음을 특징으로 하는 미니멀리스트 피드백 구성 요소입니다. 여기에는 아바타, 사용자 피드백 텍스트 및 별표로 표시되는 등급이 포함됩니다.

미리 보기

HTML 코드 

<div class="max-w-md mx-auto p-6 bg-white rounded-lg shadow-md dark:bg-gray-800 transition-shadow duration-300 ease-in-out">
    <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full" 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>
            <span class="text-gray-500 dark:text-gray-400 text-sm">2 hours ago</span>
        </div>
    </div>
    <div class="mb-4">
        <div class="flex items-center">
            <span class="text-yellow-500">
                📍📍📍📍📍
            </span>
            <span class="text-gray-500 dark:text-gray-400 ml-2">Rating: 4.5/5</span>
        </div>
    </div>
    <p class="text-gray-700 dark:text-gray-300">
        This is a sample feedback message from the user. It highlights the positive aspects and any areas for improvement.
    </p>
    <div class="mt-4">
        <img class="rounded-md" src="https://picsum.photos/400/200" alt="Feedback Image">
    </div>
</div>

관련 구성 요소

Feedback Components 구성 요소

전자 상거래를 위해 설계된 미니멀한 피드백 구성 요소로, 부드러운 파스텔 색상, 반응형 디자인 및 어두운 테마 지원을 특징으로 합니다. 구성 요소에는 입력 필드가 있는 피드백 양식, 등급 시스템 및 제출 버튼이 포함되어 있으며 모두 Tailwind CSS로 스타일이 지정되었습니다.

열다

Feedback Components 구성 요소

컨설팅/서비스 웹 사이트에 적합한 간단하고 반응이 빠른 피드백 구성 요소로, 트라이어딕 색 구성표와 마이크로 인터랙션 디자인 원칙을 특징으로 합니다. 다크 모드 지원이 포함됩니다.

열다

Neon_Glow_Feedback_Component

유사한 색 구성표를 사용하여 네온/글로우 미학을 가진 컨설팅/서비스를 위해 설계된 피드백 구성 요소입니다. 기능에는 빛나는 버튼, 미묘한 배경 그라디언트 및 다크 모드 지원이 포함됩니다.

열다