피드백 구성 요소
머티리얼 디자인 원칙에 따라 설계된 반응형 피드백 구성 요소로, 흙색을 통합하고 다크 모드를 지원합니다. 이 구성 요소는 대시보드용으로 특별히 설계되었으며 다양한 대화형 요소를 제공합니다.
HTML 코드
<div class="max-w-4xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">User Feedback</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Feedback Item -->
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
<div class="flex items-center mb-3">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3" />
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h3>
</div>
<p class="text-gray-600 dark:text-gray-300">"The new dashboard layout is intuitive and allows for quick access to data. I really appreciate the improvements!"</p>
<div class="mt-2">
<span class="text-sm font-medium text-gray-500 dark:text-gray-400">Rating: </span>
<span class="text-yellow-500 font-bold">⭐⭐⭐⭐⭐</span>
</div>
</div>
<!-- Feedback Item -->
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
<div class="flex items-center mb-3">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3" />
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h3>
</div>
<p class="text-gray-600 dark:text-gray-300">"Great features! However, I would like to see more customization options for the charts."</p>
<div class="mt-2">
<span class="text-sm font-medium text-gray-500 dark:text-gray-400">Rating: </span>
<span class="text-yellow-500 font-bold">⭐⭐⭐⭐</span>
</div>
</div>
</div>
<div class="mt-6">
<textarea class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-gray-300 dark:focus:ring-gray-500" rows="4" placeholder="Leave your feedback here..."></textarea>
</div>
<button class="mt-4 bg-green-500 hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-600 text-white font-semibold py-2 px-4 rounded-lg transition duration-200">Submit Feedback</button>
</div>
관련 구성 요소
피드백 구성 요소
Skeuomorphism에서 영감을 받은 피드백 구성 요소는 대시보드에 대한 유사한 색 구성표를 특징으로 합니다. 단순하고 반응이 빠르도록 설계되었으며 Tailwind CSS를 사용하여 다크 모드를 지원합니다. 향상된 스타일링 및 구성 요소를 위해 shadcn/ui를 활용합니다.
피드백 구성 요소
소셜 네트워킹 인터페이스용으로 설계된 반응형 피드백 구성 요소로, 다크 모드를 지원하는 그레이스케일 색 구성표에 3D 디자인 요소를 통합하고 중간 정도의 복잡성과 상호 작용에 맞게 조정되었습니다.