Feedback Components 구성 요소
교육 플랫폼의 피드백 섹션을 위한 복잡한 트라이딕 색상의 다크 모드 UI로, 다양한 피드백 유형과 인터랙티브 요소를 제공합니다.
HTML 코드
<section class="p-4 sm:p-6 lg:p-8 min-h-screen bg-gray-900 text-gray-200 dark:bg-gray-950 dark:text-gray-100 font-sans">
<div class="max-w-7xl mx-auto space-y-10">
<!-- Header Section -->
<header class="flex flex-col md:flex-row items-center justify-between pb-8 border-b border-purple-700/50 dark:border-purple-800/50">
<h1 class="text-4xl sm:text-5xl font-extrabold text-blue-400 dark:text-blue-300 mb-4 md:mb-0">Student Feedback Hub</h1>
<div class="flex items-center space-x-4">
<input type="search" placeholder="Search feedback..." class="px-4 py-2 rounded-lg bg-gray-800 dark:bg-gray-800 border border-teal-500/50 text-gray-200 dark:text-gray-100 placeholder-gray-400 focus:ring-2 focus:ring-teal-400 focus:border-transparent transition duration-300">
<button class="px-5 py-2 rounded-lg bg-purple-600 hover:bg-purple-700 text-white font-semibold transition duration-300 shadow-lg hover:shadow-xl">
Give New Feedback
</button>
</div>
</header>
<!-- Feedback Categories/Filter Section -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="p-5 rounded-xl bg-gradient-to-br from-blue-700 to-blue-900 dark:from-blue-800 dark:to-blue-950 shadow-xl border border-blue-600/50 dark:border-blue-700/50 text-center">
<p class="text-blue-200 text-sm uppercas text-gray-200">Total Feedback</p>
<p class="text-4xl font-bold mt-2 text-white">1,245</p>
</div>
<div class="p-5 rounded-xl bg-gradient-to-br from-teal-700 to-teal-900 dark:from-teal-800 dark:to-teal-950 shadow-xl border border-teal-600/50 dark:border-teal-700/50 text-center">
<p class="text-teal-200 text-sm uppercase text-gray-200">Positive</p>
<p class="text-4xl font-bold mt-2 text-white">890</p>
</div>
<div class="p-5 rounded-xl bg-gradient-to-br from-purple-700 to-purple-900 dark:from-purple-800 dark:to-purple-950 shadow-xl border border-purple-600/50 dark:border-purple-700/50 text-center">
<p class="text-purple-200 text-sm uppercase text-gray-200">Suggestions</p>
<p class="text-4xl font-bold mt-2 text-white">210</p>
</div>
<div class="p-5 rounded-xl bg-gradient-to-br from-red-700 to-red-900 dark:from-red-800 dark:to-red-950 shadow-xl border border-red-600/50 dark:border-red-700/50 text-center">
<p class="text-red-200 text-sm uppercase text-gray-200">Concerns</p>
<p class="text-4xl font-bold mt-2 text-white">145</p>
</div>
</div>
<!-- Main Feedback Content Area -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
<!-- Left Sidebar - Filters & Categories -->
<aside class="md:col-span-1 space-y-6">
<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-xl shadow-xl border border-gray-700/50 dark:border-gray-800/50">
<h3 class="text-xl font-bold mb-4 text-blue-400 dark:text-blue-300">Filter by Category</h3>
<ul class="space-y-3">
<li><a href="#" class="flex items-center justify-between py-2 px-3 rounded-lg bg-gray-700/50 hover:bg-gray-700 dark:bg-gray-800/50 dark:hover:bg-gray-800 transition duration-300 text-gray-300 hover:text-white">Course Content <span class="text-xs bg-purple-600 px-2 py-1 rounded-full text-white">80</span></a></li>
<li><a href="#" class="flex items-center justify-between py-2 px-3 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300 text-gray-300 hover:text-white">Instructor Performance <span class="text-xs bg-teal-600 px-2 py-1 rounded-full text-white">65</span></a></li>
<li><a href="#" class="flex items-center justify-between py-2 px-3 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300 text-gray-300 hover:text-white">Platform Usability <span class="text-xs bg-blue-600 px-2 py-1 rounded-full text-white">40</span></a></li>
<li><a href="#" class="flex items-center justify-between py-2 px-3 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300 text-gray-300 hover:text-white">Technical Support <span class="text-xs bg-red-600 px-2 py-1 rounded-full text-white">15</span></a></li>
<li><a href="#" class="flex items-center justify-between py-2 px-3 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300 text-gray-300 hover:text-white">General <span class="text-xs bg-gray-600 px-2 py-1 rounded-full text-white">120</span></a></li>
</ul>
</div>
<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-xl shadow-xl border border-gray-700/50 dark:border-gray-800/50">
<h3 class="text-xl font-bold mb-4 text-purple-400 dark:text-purple-300">Filter by Rating</h3>
<div class="flex items-center space-x-3 mb-3">
<input type="range" min="1" max="5" value="4" class="flex-grow h-2 rounded-lg appearance-none cursor-pointer bg-blue-600/50 dark:bg-blue-700/50 accent-blue-500">
<span class="text-gray-300">4+ Stars</span>
</div>
<ul class="space-y-2">
<li><label class="flex items-center space-x-2 text-gray-300"><input type="checkbox" class="form-checkbox h-4 w-4 text-blue-500 rounded-sm bg-gray-700 border-gray-600 dark:bg-gray-800 dark:border-gray-700 focus:ring-blue-500"> <span class="text-gray-300">5 Stars</span></label></li>
<li><label class="flex items-center space-x-2 text-gray-300"><input type="checkbox" class="form-checkbox h-4 w-4 text-blue-500 rounded-sm bg-gray-700 border-gray-600 dark:bg-gray-800 dark:border-gray-700 focus:ring-blue-500" checked> <span class="text-gray-300">4 Stars</span></label></li>
<li><label class="flex items-center space-x-2 text-gray-300"><input type="checkbox" class="form-checkbox h-4 w-4 text-blue-500 rounded-sm bg-gray-700 border-gray-600 dark:bg-gray-800 dark:border-gray-700 focus:ring-blue-500"> <span class="text-gray-300">3 Stars</span></label></li>
<li><label class="flex items-center space-x-2 text-gray-300"><input type="checkbox" class="form-checkbox h-4 w-4 text-blue-500 rounded-sm bg-gray-700 border-gray-600 dark:bg-gray-800 dark:border-gray-700 focus:ring-blue-500"> <span class="text-gray-300">2 Stars</span></label></li>
<li><label class="flex items-center space-x-2 text-gray-300"><input type="checkbox" class="form-checkbox h-4 w-4 text-blue-500 rounded-sm bg-gray-700 border-gray-600 dark:bg-gray-800 dark:border-gray-700 focus:ring-blue-500"> <span class="text-gray-300">1 Star</span></label></li>
</ul>
</div>
</aside>
<!-- Right Content - Feedback Cards -->
<div class="md:col-span-2 space-y-6">
<!-- Feedback Card 1 (Positive) -->
<article class="bg-gray-800 dark:bg-gray-900 p-6 rounded-xl shadow-xl border border-teal-600/50 dark:border-teal-700/50">
<div class="flex justify-between items-start mb-4">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full ring-2 ring-teal-500 dark:ring-teal-600">
<div>
<h4 class="font-semibold text-white">Alex Johnson</h4>
<p class="text-sm text-gray-400">Course: Advanced CSS & Tailwind</p>
</div>
</div>
<div class="text-teal-400 flex items-center space-x-1">
<span>5</span>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.642 7.362 8.113 1.178-5.875 5.728 1.389 8.082L12 18.06l-7.279 3.827 1.389-8.082-5.875-5.728 8.113-1.178L12 .587z"/></svg>
</div>
</div>
<p class="text-gray-300 leading-relaxed mb-4">"This course was absolutely fantastic! The explanations were clear, and the hands-on projects really solidified my understanding of Tailwind CSS. Highly recommend it to anyone looking to master modern web design."</p>
<div class="flex flex-wrap gap-2 text-sm">
<span class="px-3 py-1 rounded-full bg-teal-700/50 text-teal-200">#CourseContent</span>
<span class="px-3 py-1 rounded-full bg-teal-700/50 text-teal-200">#Excellent</span>
<span class="px-3 py-1 rounded-full bg-teal-700/50 text-teal-200">#Practical</span>
</div>
<div class="flex items-center justify-between mt-4 text-gray-400">
<span class="text-sm">Posted 2 days ago</span>
<button class="text-blue-400 hover:text-blue-300 transition duration-300">View Details</button>
</div>
</article>
<!-- Feedback Card 2 (Suggestion) -->
<article class="bg-gray-800 dark:bg-gray-900 p-6 rounded-xl shadow-xl border border-purple-600/50 dark:border-purple-700/50">
<div class="flex justify-between items-start mb-4">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-12 h-12 rounded-full ring-2 ring-purple-500 dark:ring-purple-600">
<div>
<h4 class="font-semibold text-white">Sarah Chen</h4>
<p class="text-sm text-gray-400">Course: JavaScript Fundamentals</p>
</div>
</div>
<div class="text-purple-400 flex items-center space-x-1">
<span>4</span>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.642 7.362 8.113 1.178-5.875 5.728 1.389 8.082L12 18.06l-7.279 3.827 1.389-8.082-5.875-5.728 8.113-1.178L12 .587z"/></svg>
</div>
</div>
<p class="text-gray-300 leading-relaxed mb-4">"The JS course is solid, but I think adding more interactive coding challenges directly within the platform would significantly enhance the learning experience. Sometimes switching between platforms disrupts the flow."</p>
<div class="flex flex-wrap gap-2 text-sm">
<span class="px-3 py-1 rounded-full bg-purple-700/50 text-purple-200">#PlatformUsability</span>
<span class="px-3 py-1 rounded-full bg-purple-700/50 text-purple-200">#Suggestion</span>
<span class="px-3 py-1 rounded-full bg-purple-700/50 text-purple-200">#Engagement</span>
</div>
<div class="flex items-center justify-between mt-4 text-gray-400">
<span class="text-sm">Posted 5 days ago</span>
<button class="text-blue-400 hover:text-blue-300 transition duration-300">View Details</button>
</div>
</article>
<!-- Feedback Card 3 (Concern/Bug Report) -->
<article class="bg-gray-800 dark:bg-gray-900 p-6 rounded-xl shadow-xl border border-red-600/50 dark:border-red-700/50">
<div class="flex justify-between items-start mb-4">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/19.jpg" alt="User Avatar" class="w-12 h-12 rounded-full ring-2 ring-red-500 dark:ring-red-600">
<div>
<h4 class="font-semibold text-white">Marcus Hill</h4>
<p class="text-sm text-gray-400">Course: Data Structures & Algorithms</p>
</div>
</div>
<div class="text-red-400 flex items-center space-x-1">
<span>2</span>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.642 7.362 8.113 1.178-5.875 5.728 1.389 8.082L12 18.06l-7.279 3.827 1.389-8.082-5.875-5.728 8.113-1.178L12 .587z"/></svg>
</div>
</div>
<p class="text-gray-300 leading-relaxed mb-4">"I've encountered multiple broken links in the 'Further Reading' section of Module 3. It's frustrating to try and access resources only to find they're unavailable. Please update these links."</p>
<div class="flex flex-wrap gap-2 text-sm">
<span class="px-3 py-1 rounded-full bg-red-700/50 text-red-200">#TechnicalSupport</span>
<span class="px-3 py-1 rounded-full bg-red-700/50 text-red-200">#BrokenLinks</span>
<span class="px-3 py-1 rounded-full bg-red-700/50 text-red-200">#Urgent</span>
</div>
<div class="flex items-center justify-between mt-4 text-gray-400">
<span class="text-sm">Posted 1 week ago</span>
<button class="text-blue-400 hover:text-blue-300 transition duration-300">View Details</button>
</div>
</article>
</div>
</div>
<!-- Pagination / Load More -->
<div class="flex justify-center mt-10">
<button class="px-6 py-3 rounded-lg bg-blue-600 hover:bg-blue-700 text-white font-semibold transition duration-300 shadow-lg hover:shadow-xl">
Load More Feedback
</button>
</div>
</div>
</section>관련 구성 요소
피드백 구성 요소
매력적인 애니메이션과 마이크로 상호 작용을 통합하는 반응형 피드백 구성 요소입니다. 다크 모드를 지원하도록 설계되었으며 자리 표시자 이미지 및 아바타와 함께 사용자 피드백을 위한 요소를 제공합니다.
피드백 구성 요소
소셜 네트워킹 인터페이스용으로 설계된 반응형 피드백 구성 요소로, 다크 모드를 지원하는 그레이스케일 색 구성표에 3D 디자인 요소를 통합하고 중간 정도의 복잡성과 상호 작용에 맞게 조정되었습니다.
Luxury_Premium_Vibrant_Simple_Food_Restaurant_Feedback_Component
음식/레스토랑 웹사이트를 위한 간단하고 우아한 피드백 구성 요소로, 생동감 넘치는 채도가 높은 색 구성표와 다크 모드를 지원합니다. 고급스러움/프리미엄 느낌을 위해 설계되었습니다.