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

피드백 구성 요소 23

머티리얼 디자인 스타일로 디자인된 피드백 구성 요소로, 반응형 애니메이션과 어두운 테마 지원을 특징으로 하며 Tailwind CSS로 빌드되었습니다.

미리 보기

HTML 코드 

<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md max-w-md mx-auto transition duration-300 ease-in-out transform hover:scale-105">
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-gray-300 dark:border-gray-600">
        <div>
            <h3 class="font-semibold text-gray-800 dark:text-gray-200">John Doe</h3>
            <p class="text-sm text-gray-600 dark:text-gray-400">2 hours ago</p>
        </div>
    </div>
    <p class="text-gray-700 dark:text-gray-300 mb-4">This is an example feedback component for showcasing how user feedback can be displayed using Material Design principles. It supports dark mode with Tailwind CSS.</p>
    <img src="https://picsum.photos/200/100" alt="Feedback Image" class="w-full rounded-md mb-4">
    <div class="flex justify-between">
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-200 ease-in-out">Like</button>
        <button class="bg-gray-300 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-500 text-gray-800 dark:text-gray-200 font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-200 ease-in-out">Reply</button>
    </div>
</div>

관련 구성 요소

피드백 구성 요소

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

열다

Feedback Components 구성 요소

파스텔 색조, 적당한 복잡성, 어두운 테마를 지원하는 반응형 디자인을 갖춘 브루탈리즘 스타일의 피드백 구성 요소입니다. 피드백 또는 추천을 보여줄 수 있는 포트폴리오를 위해 설계되었습니다.

열다

피드백 구성 요소

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

열다