一个为黑暗模式设计的复杂反馈组件,适用于商业/企业网站,采用互补色方案。
<div class="bg-gray-900 p-6 rounded-lg shadow-md dark:bg-gray-800"> <h2 class="text-2xl font-bold text-white mb-4">Feedback Component</h2> <form class="space-y-4"> <div> <label for="name" class="block text-gray-300 dark:text-gray-200">Name</label> <input type="text" id="name" class="mt-1 p-2 w-full rounded-md border border-gray-700 bg-gray-800 text-gray-200 dark:bg-gray-900 dark:border-gray-600" placeholder="Your Name" required /> </div> <div> <label for="email" class="block text-gray-300 dark:text-gray-200">Email</label> <input type="email" id="email" class="mt-1 p-2 w-full rounded-md border border-gray-700 bg-gray-800 text-gray-200 dark:bg-gray-900 dark:border-gray-600" placeholder="Your Email" required /> </div> <div> <label for="feedback" class="block text-gray-300 dark:text-gray-200">Feedback</label> <textarea id="feedback" rows="4" class="mt-1 p-2 w-full rounded-md border border-gray-700 bg-gray-800 text-gray-200 dark:bg-gray-900 dark:border-gray-600" placeholder="Your Feedback" required></textarea> </div> <div class="flex items-center mb-4"> <input type="checkbox" id="subscribe" class="h-4 w-4 text-teal-500 border-gray-700 rounded dark:bg-gray-900 dark:border-gray-600" /> <label for="subscribe" class="ml-2 text-gray-300 dark:text-gray-200">Subscribe to our newsletter</label> </div> <button type="submit" class="w-full bg-teal-600 hover:bg-teal-500 rounded-md text-white font-semibold py-2 transition duration-200 ease-in-out">Submit</button> </form> <div class="mt-6"> <h3 class="text-lg font-semibold text-gray-400 dark:text-gray-300">Recent Feedback</h3> <div class="mt-2 bg-gray-800 p-4 rounded-md shadow-md dark:bg-gray-700"> <div class="flex items-center mb-2"> <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full mr-3" /> <div> <p class="text-gray-200 dark:text-gray-100 font-bold">John Doe</p> <p class="text-gray-300 dark:text-gray-400">Great service! Highly recommend.</p> </div> </div> <div class="flex items-center mb-2"> <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full mr-3" /> <div> <p class="text-gray-200 dark:text-gray-100 font-bold">Jane Smith</p> <p class="text-gray-300 dark:text-gray-400">Loved the experience, will come back!</p> </div> </div> </div> </div> </div>
一个反馈组件,专为具有霓虹灯/发光美感的咨询/服务而设计,使用类似的配色方案。功能包括发光按钮、微妙的背景渐变和深色模式支持。
一个适用于非营利组织的简单响应式反馈组件,具有 3D 设计美学和温暖的日落色调。包括深色模式支持。
一个为深色模式设计的响应式反馈组件,颜色鲜艳,非常适合博客和内容消费。