Feedback Components 구성 요소
미니멀리스트/플랫 디자인 피드백 구성 요소: 보색 구성표와 적당한 복잡성, 반응형 및 어두운 테마 지원이 있는 대시보드용. HTML 및 Tailwind CSS를 사용합니다. 자바스크립트가 없습니다. 대화형 요소가 있습니다. picsum.photos의 이미지와 randomuser.me 의 아바타.
HTML 코드
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
<div class="flex items-center justify-between mb-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">User Feedback</h2>
<span class="text-sm text-gray-500 dark:text-gray-400">Last 30 days</span>
</div>
<div class="space-y-4">
<div class="flex items-start space-x-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div class="flex-1">
<div class="flex items-center justify-between">
<h4 class="text-sm font-medium text-gray-900 dark:text-white">John Doe</h4>
<span class="text-xs text-gray-500 dark:text-gray-400">2 days ago</span>
</div>
<p class="text-sm text-gray-600 dark:text-gray-300">This dashboard is very helpful. The data is presented clearly.</p>
</div>
</div>
<div class="flex items-start space-x-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div class="flex-1">
<div class="flex items-center justify-between">
<h4 class="text-sm font-medium text-gray-900 dark:text-white">Jane Smith</h4>
<span class="text-xs text-gray-500 dark:text-gray-400">5 days ago</span>
</div>
<p class="text-sm text-gray-600 dark:text-gray-300">I love the new features! Especially the real-time updates.</p>
</div>
</div>
<div class="flex items-start space-x-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/19.jpg" alt="User Avatar">
<div class="flex-1">
<div class="flex items-center justify-between">
<h4 class="text-sm font-medium text-gray-900 dark:text-white">Peter Jones</h4>
<span class="text-xs text-gray-500 dark:text-gray-400">1 week ago</span>
</div>
<p class="text-sm text-gray-600 dark:text-gray-300">Could you add an option to export data as a CSV file?</p>
</div>
</div>
</div>
<div class="mt-6 flex justify-center">
<button class="px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:bg-indigo-700 dark:hover:bg-indigo-600 dark:focus:ring-offset-gray-800">View All Feedback</button>
</div>
</div>관련 구성 요소
유기적 인 자연 피드백 구성 요소
게임 웹사이트를 위해 디자인된 자연에서 영감을 받은 복잡하고 영감을 받은 피드백 구성 요소로, 흐르는 선, 시원한 뉴트럴 컬러, 다크 모드 지원을 통한 완벽한 반응성을 특징으로 합니다.
Feedback Components 구성 요소
파스텔 색조, 적당한 복잡성, 어두운 테마를 지원하는 반응형 디자인을 갖춘 브루탈리즘 스타일의 피드백 구성 요소입니다. 피드백 또는 추천을 보여줄 수 있는 포트폴리오를 위해 설계되었습니다.
비영리 단체 피드백 구성요소 (3D 스타일)
비영리 단체를 위한 간단하고 반응이 빠른 피드백 구성 요소로, 3D 디자인의 미학과 따뜻한 일몰 톤을 특징으로 합니다. 다크 모드 지원이 포함됩니다.