反馈组件

拟物化启发的反馈组件,具有仪表板的类似配色方案。设计简单、响应迅速,并支持使用 Tailwind CSS 的深色模式。利用 shadcn/ui 增强样式和组件。

预览

HTML 代码

<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-xl">
  <div class="flex items-center mb-4">
    <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
    <div>
      <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h3>
      <p class="text-sm text-gray-600 dark:text-gray-400">Financial Analyst</p>
    </div>
  </div>
  <p class="text-gray-700 dark:text-gray-300 mb-4">
    The new dashboard features are excellent! The data visualization is clear and concisely presented, making it much easier to track key metrics. The performance has also improved significantly.
  </p>
  <div class="flex items-center text-yellow-500">
    <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20">
      <path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.309l6.572-.955L10 0l2.939 5.354 6.572.955-4.756 4.936 1.123 6.545z"/>
    </svg>
    <span>4.5</span>
  </div>
</div>

相关组件

Feedback Components 组件

野兽派风格的反馈组件,具有柔和的配色方案、适度的复杂度和响应式设计,支持深色主题。专为作品集而设计,用于展示反馈或推荐。

打开

反馈组件

一个为深色模式设计的响应式反馈组件,颜色鲜艳,非常适合博客和内容消费。

打开

反馈组件

一个为社交媒体界面设计的反馈组件,结合微交互和灰度色彩方案,支持黑暗主题。

打开