CCHub Logo CCHub Tailwind Collection
组件 评级系统 复古评分系统组件

复古评分系统组件

用于电子商务的简单复古风格评级系统组件，使用 Tailwind CSS 提供鲜艳的色彩和深色主题支持。

预览

HTML 代码 

<div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800">
  <div class="flex space-x-1 text-2xl">
    <!-- Star 1 -->
    <svg class="w-8 h-8 text-yellow-400 dark:text-yellow-500" fill="currentColor" viewBox="0 0 24 24">
      <path d="M12 .288l3.525 10.917L24 11.462l-8.475 5.068 3.119 9.142L12 20.05l-6.644 5.622 3.119-9.142L0 11.462l8.475-.257L12 .288z"/>
    </svg>
    <!-- Star 2 -->
    <svg class="w-8 h-8 text-yellow-400 dark:text-yellow-500" fill="currentColor" viewBox="0 0 24 24">
      <path d="M12 .288l3.525 10.917L24 11.462l-8.475 5.068 3.119 9.142L12 20.05l-6.644 5.622 3.119-9.142L0 11.462l8.475-.257L12 .288z"/>
    </svg>
    <!-- Star 3 -->
    <svg class="w-8 h-8 text-yellow-400 dark:text-yellow-500" fill="currentColor" viewBox="0 0 24 24">
      <path d="M12 .288l3.525 10.917L24 11.462l-8.475 5.068 3.119 9.142L12 20.05l-6.644 5.622 3.119-9.142L0 11.462l8.475-.257L12 .288z"/>
    </svg>
    <!-- Star 4 -->
    <svg class="w-8 h-8 text-yellow-400 dark:text-yellow-500" fill="currentColor" viewBox="0 0 24 24">
      <path d="M12 .288l3.525 10.917L24 11.462l-8.475 5.068 3.119 9.142L12 20.05l-6.644 5.622 3.119-9.142L0 11.462l8.475-.257L12 .288z"/>
    </svg>
    <!-- Star 5 (empty) -->
    <svg class="w-8 h-8 text-gray-400 dark:text-gray-600" fill="currentColor" viewBox="0 0 24 24">
      <path d="M12 .288l3.525 10.917L24 11.462l-8.475 5.068 3.119 9.142L12 20.05l-6.644 5.622 3.119-9.142L0 11.462l8.475-.257L12 .288z"/>
    </svg>
  </div>
</div>

相关组件

评级系统组件

极简/扁平化设计评级系统组件，具有互补的配色方案，复杂程度适中，适合博客/内容消费。它具有响应式设计，使用 Tailwind CSS 类和无 JavaScript 的深色主题支持。

打开

评级系统组件

用于电子商务的 Retro/Vintage 评级系统组件，具有互补色方案。响应式，支持深色模式。不需要 JavaScript，只需要带有 Tailwind CSS 的 HTML。

打开

Neumorphic Vibrant 评分系统组件

一个复杂的交互式评级系统组件，采用 Neumorphic 风格和充满活力的配色方案设计，适用于论坛和社区平台。它包括星级评定、赞成/反对投票和数字显示，具有完全响应能力和深色模式支持。

打开