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>

관련 구성 요소

Luxury_Premium_Vibrant_Simple_Food_Restaurant_Feedback_Component

음식/레스토랑 웹사이트를 위한 간단하고 우아한 피드백 구성 요소로, 생동감 넘치는 채도가 높은 색 구성표와 다크 모드를 지원합니다. 고급스러움/프리미엄 느낌을 위해 설계되었습니다.

열다

Neon_Glow_Feedback_Component

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

열다

비영리 단체 피드백 구성요소 (3D 스타일)

비영리 단체를 위한 간단하고 반응이 빠른 피드백 구성 요소로, 3D 디자인의 미학과 따뜻한 일몰 톤을 특징으로 합니다. 다크 모드 지원이 포함됩니다.

열다