Feedback Components 구성 요소
전자 상거래를 위해 설계된 미니멀한 피드백 구성 요소로, 부드러운 파스텔 색상, 반응형 디자인 및 어두운 테마 지원을 특징으로 합니다. 구성 요소에는 입력 필드가 있는 피드백 양식, 등급 시스템 및 제출 버튼이 포함되어 있으며 모두 Tailwind CSS로 스타일이 지정되었습니다.
HTML 코드
<div class="max-w-md mx-auto p-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Your Feedback Matters!</h2>
<p class="text-gray-600 dark:text-gray-400 mb-6">We value your opinion. Please leave your feedback below!</p>
<form class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="name">Name</label>
<input id="name" type="text" placeholder="Your Name" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" required />
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="email">Email</label>
<input id="email" type="email" placeholder="Your Email" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" required />
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="rating">Rating</label>
<select id="rating" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" required>
<option value="5">⭐⭐⭐⭐⭐</option>
<option value="4">⭐⭐⭐⭐</option>
<option value="3">⭐⭐⭐</option>
<option value="2">⭐⭐</option>
<option value="1">⭐</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="message">Message</label>
<textarea id="message" rows="4" placeholder="Your Feedback" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" required></textarea>
</div>
<div>
<button type="submit" class="w-full py-2 px-4 bg-pink-500 text-white font-semibold rounded-md shadow-md hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-pink-500 dark:bg-pink-600 dark:hover:bg-pink-700">Submit Feedback</button>
</div>
</form>
<div class="mt-6 flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="h-10 w-10 rounded-full">
<span class="text-gray-600 dark:text-gray-400">John Doe</span>
</div>
<div class="mt-4 text-sm text-gray-500 dark:text-gray-400">
<p>Feedback received on: <span class="text-gray-800 dark:text-gray-200">10/23/2023</span></p>
</div>
</div>