组件 评级系统 复古评分系统组件

复古评分系统组件

用于电子商务的简单复古风格评级系统组件,使用 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>

相关组件

Bauhaus_Music_Rating_System

响应式音乐/音频评级系统组件,采用包豪斯风格的设计,采用紫色/紫色配色方案。包括深色模式支持和交互式星级评定功能(仅视觉,无 JS)。

打开

评分系统组件

一个响应式评分系统组件,采用野兽派风格使用Tailwind CSS设计。它支持深色主题,并具有高对比度,设计粗犷大胆。

打开

评分系统组件

一个支持深色主题的响应式评级系统组件,采用极简/平面风格设计,具有用于社交媒体界面的柔和配色方案。它是一个具有多个交互元素的复杂组件。

打开