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

피드백 구성 요소

소셜 네트워킹 인터페이스용으로 설계된 반응형 피드백 구성 요소로, 다크 모드를 지원하는 그레이스케일 색 구성표에 3D 디자인 요소를 통합하고 중간 정도의 복잡성과 상호 작용에 맞게 조정되었습니다.

미리 보기

HTML 코드 

<div class="max-w-md mx-auto p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg transform hover:shadow-2xl transition-shadow duration-300">
    <div class="flex items-start mb-4">
        <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
        <div class="ml-4">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">User Name</h2>
            <p class="text-gray-600 dark:text-gray-300">April 10, 2023</p>
        </div>
    </div>
    <p class="text-gray-700 dark:text-gray-300 mb-4">
        This is an example feedback message where users can share their thoughts about the platform and engage with the community.
    </p>
    <div class="flex justify-between items-center">
        <button class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-md shadow hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none">Like</button>
        <button class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-md shadow hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none">Reply</button>
    </div>
</div>
<div class="max-w-md mx-auto mt-4 p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg transform hover:shadow-2xl transition-shadow duration-300">
    <div class="flex items-start mb-4">
        <img src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
        <div class="ml-4">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Another User</h2>
            <p class="text-gray-600 dark:text-gray-300">April 11, 2023</p>
        </div>
    </div>
    <p class="text-gray-700 dark:text-gray-300 mb-4">
        Feedback is important to shape the experience in a positive direction and enhance user engagement within the social platform.
    </p>
    <div class="flex justify-between items-center">
        <button class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-md shadow hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none">Like</button>
        <button class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-md shadow hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none">Reply</button>
    </div>
</div>

관련 구성 요소

피드백 구성 요소

매력적인 애니메이션과 마이크로 상호 작용을 통합하는 반응형 피드백 구성 요소입니다. 다크 모드를 지원하도록 설계되었으며 자리 표시자 이미지 및 아바타와 함께 사용자 피드백을 위한 요소를 제공합니다.

열다

피드백 구성 요소

소셜 미디어 인터페이스를 위해 설계된 피드백 구성 요소로, 마이크로 인터랙션과 회색조 색 구성표를 통합하고 어두운 테마를 지원합니다.

열다

Feedback Components 구성 요소

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

열다