反馈组件

一个响应式反馈组件,结合了微交互和吸引人的动画。它旨在支持暗黑模式,并具有用户反馈的元素,包括占位符图像和头像。

预览

HTML 代码

<div class="flex flex-col items-center p-5 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
  <h2 class="text-lg font-semibold dark:text-white mb-4">We Value Your Feedback!</h2>
  <div class="flex items-center mb-4">
    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
    <textarea class="ml-3 w-full h-24 p-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-shadow duration-200 ease-in-out" placeholder="Share your thoughts..."></textarea>
  </div>
  <div class="flex justify-between w-full">
    <button class="bg-blue-600 text-white font-semibold py-2 px-4 rounded-md transition-transform transform hover:scale-105 duration-200 ease-in-out">Submit</button>
    <button class="bg-gray-300 text-gray-700 font-semibold py-2 px-4 rounded-md hover:bg-gray-400 transition-colors duration-200 ease-in-out dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600">Cancel</button>
  </div>
  <p class="text-sm text-gray-500 dark:text-gray-400 mt-3">Your feedback helps us improve!</p>
</div>

相关组件

Feedback Components 组件

专为电子商务设计的极简主义反馈组件,具有柔和柔和的色彩、响应式设计和深色主题支持。该组件包括一个带有输入字段的反馈表单、一个评级系统和一个提交按钮,所有这些按钮都使用 Tailwind CSS 设置样式。

打开

反馈组件

一个反馈组件,具有评分刻度和评论文本区域,采用响应式设计,支持暗黑主题。

打开

反馈组件

一个简单的玻璃态反馈组件,专为社交媒体设计,采用三元色彩方案,具有响应式设计和暗主题支持。不需要JavaScript。

打开