Skip to content
Early Access

Rating

A rating component for user feedback.

Basic

PreviewCode
<div class="flex">
  <button class="appearance-none disabled:opacity-50" type="button" aria-label="Star 1 out of 5">
    <svg width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="shrink-0 text-amber-500 h-5 w-5">
      <path d="M12.76 4.445a.87.87 0 0 0-1.52 0 23.989 23.989 0 0 0-1.829 4.233.975.975 0 0 1-.908.66 26.133 26.133 0 0 0-3.793.378c-.688.12-.946.905-.458 1.383a27.976 27.976 0 0 0 3.031 2.57.91.91 0 0 1 .336 1.024 23.826 23.826 0 0 0-1.012 4.38c-.09.67.629 1.145 1.253.825a25.184 25.184 0 0 0 3.538-2.198 1.02 1.02 0 0 1 1.204 0 25.34 25.34 0 0 0 3.538 2.198c.624.32 1.343-.154 1.253-.825a23.823 23.823 0 0 0-1.012-4.38.91.91 0 0 1 .335-1.024 27.97 27.97 0 0 0 3.032-2.57c.488-.478.23-1.263-.458-1.383a25.81 25.81 0 0 0-3.793-.378.975.975 0 0 1-.91-.66 23.989 23.989 0 0 0-1.828-4.233Z">
      </path>
    </svg>
  </button>
  <button class="appearance-none disabled:opacity-50" type="button" aria-label="Star 2 out of 5">
    <svg width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="shrink-0 text-amber-500 h-5 w-5">
      <path d="M12.76 4.445a.87.87 0 0 0-1.52 0 23.989 23.989 0 0 0-1.829 4.233.975.975 0 0 1-.908.66 26.133 26.133 0 0 0-3.793.378c-.688.12-.946.905-.458 1.383a27.976 27.976 0 0 0 3.031 2.57.91.91 0 0 1 .336 1.024 23.826 23.826 0 0 0-1.012 4.38c-.09.67.629 1.145 1.253.825a25.184 25.184 0 0 0 3.538-2.198 1.02 1.02 0 0 1 1.204 0 25.34 25.34 0 0 0 3.538 2.198c.624.32 1.343-.154 1.253-.825a23.823 23.823 0 0 0-1.012-4.38.91.91 0 0 1 .335-1.024 27.97 27.97 0 0 0 3.032-2.57c.488-.478.23-1.263-.458-1.383a25.81 25.81 0 0 0-3.793-.378.975.975 0 0 1-.91-.66 23.989 23.989 0 0 0-1.828-4.233Z">
      </path>
    </svg>
  </button>
  <button class="appearance-none disabled:opacity-50" type="button" aria-label="Star 3 out of 5">
    <svg width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="shrink-0 text-amber-500 h-5 w-5">
      <path d="M12.76 4.445a.87.87 0 0 0-1.52 0 23.989 23.989 0 0 0-1.829 4.233.975.975 0 0 1-.908.66 26.133 26.133 0 0 0-3.793.378c-.688.12-.946.905-.458 1.383a27.976 27.976 0 0 0 3.031 2.57.91.91 0 0 1 .336 1.024 23.826 23.826 0 0 0-1.012 4.38c-.09.67.629 1.145 1.253.825a25.184 25.184 0 0 0 3.538-2.198 1.02 1.02 0 0 1 1.204 0 25.34 25.34 0 0 0 3.538 2.198c.624.32 1.343-.154 1.253-.825a23.823 23.823 0 0 0-1.012-4.38.91.91 0 0 1 .335-1.024 27.97 27.97 0 0 0 3.032-2.57c.488-.478.23-1.263-.458-1.383a25.81 25.81 0 0 0-3.793-.378.975.975 0 0 1-.91-.66 23.989 23.989 0 0 0-1.828-4.233Z">
      </path>
    </svg>
  </button>
  <button class="appearance-none disabled:opacity-50" type="button" aria-label="Star 4 out of 5">
    <svg width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="shrink-0 text-slate-200 h-5 w-5">
      <path d="M12.76 4.445a.87.87 0 0 0-1.52 0 23.989 23.989 0 0 0-1.829 4.233.975.975 0 0 1-.908.66 26.133 26.133 0 0 0-3.793.378c-.688.12-.946.905-.458 1.383a27.976 27.976 0 0 0 3.031 2.57.91.91 0 0 1 .336 1.024 23.826 23.826 0 0 0-1.012 4.38c-.09.67.629 1.145 1.253.825a25.184 25.184 0 0 0 3.538-2.198 1.02 1.02 0 0 1 1.204 0 25.34 25.34 0 0 0 3.538 2.198c.624.32 1.343-.154 1.253-.825a23.823 23.823 0 0 0-1.012-4.38.91.91 0 0 1 .335-1.024 27.97 27.97 0 0 0 3.032-2.57c.488-.478.23-1.263-.458-1.383a25.81 25.81 0 0 0-3.793-.378.975.975 0 0 1-.91-.66 23.989 23.989 0 0 0-1.828-4.233Z">
      </path>
    </svg>
  </button>
  <button class="appearance-none disabled:opacity-50" type="button" aria-label="Star 5 out of 5">
    <svg width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="shrink-0 text-slate-200 h-5 w-5">
      <path d="M12.76 4.445a.87.87 0 0 0-1.52 0 23.989 23.989 0 0 0-1.829 4.233.975.975 0 0 1-.908.66 26.133 26.133 0 0 0-3.793.378c-.688.12-.946.905-.458 1.383a27.976 27.976 0 0 0 3.031 2.57.91.91 0 0 1 .336 1.024 23.826 23.826 0 0 0-1.012 4.38c-.09.67.629 1.145 1.253.825a25.184 25.184 0 0 0 3.538-2.198 1.02 1.02 0 0 1 1.204 0 25.34 25.34 0 0 0 3.538 2.198c.624.32 1.343-.154 1.253-.825a23.823 23.823 0 0 0-1.012-4.38.91.91 0 0 1 .335-1.024 27.97 27.97 0 0 0 3.032-2.57c.488-.478.23-1.263-.458-1.383a25.81 25.81 0 0 0-3.793-.378.975.975 0 0 1-.91-.66 23.989 23.989 0 0 0-1.828-4.233Z">
      </path>
    </svg>
  </button>
</div>

Disabled

PreviewCode
<div class="flex">
  <button class="appearance-none disabled:opacity-50" type="button" aria-label="Star 1 out of 5" disabled="">
    <svg width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="shrink-0 text-amber-500 h-5 w-5">
      <path d="M12.76 4.445a.87.87 0 0 0-1.52 0 23.989 23.989 0 0 0-1.829 4.233.975.975 0 0 1-.908.66 26.133 26.133 0 0 0-3.793.378c-.688.12-.946.905-.458 1.383a27.976 27.976 0 0 0 3.031 2.57.91.91 0 0 1 .336 1.024 23.826 23.826 0 0 0-1.012 4.38c-.09.67.629 1.145 1.253.825a25.184 25.184 0 0 0 3.538-2.198 1.02 1.02 0 0 1 1.204 0 25.34 25.34 0 0 0 3.538 2.198c.624.32 1.343-.154 1.253-.825a23.823 23.823 0 0 0-1.012-4.38.91.91 0 0 1 .335-1.024 27.97 27.97 0 0 0 3.032-2.57c.488-.478.23-1.263-.458-1.383a25.81 25.81 0 0 0-3.793-.378.975.975 0 0 1-.91-.66 23.989 23.989 0 0 0-1.828-4.233Z">
      </path>
    </svg>
  </button>
  <button class="appearance-none disabled:opacity-50" type="button" aria-label="Star 2 out of 5" disabled="">
    <svg width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="shrink-0 text-amber-500 h-5 w-5">
      <path d="M12.76 4.445a.87.87 0 0 0-1.52 0 23.989 23.989 0 0 0-1.829 4.233.975.975 0 0 1-.908.66 26.133 26.133 0 0 0-3.793.378c-.688.12-.946.905-.458 1.383a27.976 27.976 0 0 0 3.031 2.57.91.91 0 0 1 .336 1.024 23.826 23.826 0 0 0-1.012 4.38c-.09.67.629 1.145 1.253.825a25.184 25.184 0 0 0 3.538-2.198 1.02 1.02 0 0 1 1.204 0 25.34 25.34 0 0 0 3.538 2.198c.624.32 1.343-.154 1.253-.825a23.823 23.823 0 0 0-1.012-4.38.91.91 0 0 1 .335-1.024 27.97 27.97 0 0 0 3.032-2.57c.488-.478.23-1.263-.458-1.383a25.81 25.81 0 0 0-3.793-.378.975.975 0 0 1-.91-.66 23.989 23.989 0 0 0-1.828-4.233Z">
      </path>
    </svg>
  </button>
  <button class="appearance-none disabled:opacity-50" type="button" aria-label="Star 3 out of 5" disabled="">
    <svg width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="shrink-0 text-amber-500 h-5 w-5">
      <path d="M12.76 4.445a.87.87 0 0 0-1.52 0 23.989 23.989 0 0 0-1.829 4.233.975.975 0 0 1-.908.66 26.133 26.133 0 0 0-3.793.378c-.688.12-.946.905-.458 1.383a27.976 27.976 0 0 0 3.031 2.57.91.91 0 0 1 .336 1.024 23.826 23.826 0 0 0-1.012 4.38c-.09.67.629 1.145 1.253.825a25.184 25.184 0 0 0 3.538-2.198 1.02 1.02 0 0 1 1.204 0 25.34 25.34 0 0 0 3.538 2.198c.624.32 1.343-.154 1.253-.825a23.823 23.823 0 0 0-1.012-4.38.91.91 0 0 1 .335-1.024 27.97 27.97 0 0 0 3.032-2.57c.488-.478.23-1.263-.458-1.383a25.81 25.81 0 0 0-3.793-.378.975.975 0 0 1-.91-.66 23.989 23.989 0 0 0-1.828-4.233Z">
      </path>
    </svg>
  </button>
  <button class="appearance-none disabled:opacity-50" type="button" aria-label="Star 4 out of 5" disabled="">
    <svg width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="shrink-0 text-slate-200 h-5 w-5">
      <path d="M12.76 4.445a.87.87 0 0 0-1.52 0 23.989 23.989 0 0 0-1.829 4.233.975.975 0 0 1-.908.66 26.133 26.133 0 0 0-3.793.378c-.688.12-.946.905-.458 1.383a27.976 27.976 0 0 0 3.031 2.57.91.91 0 0 1 .336 1.024 23.826 23.826 0 0 0-1.012 4.38c-.09.67.629 1.145 1.253.825a25.184 25.184 0 0 0 3.538-2.198 1.02 1.02 0 0 1 1.204 0 25.34 25.34 0 0 0 3.538 2.198c.624.32 1.343-.154 1.253-.825a23.823 23.823 0 0 0-1.012-4.38.91.91 0 0 1 .335-1.024 27.97 27.97 0 0 0 3.032-2.57c.488-.478.23-1.263-.458-1.383a25.81 25.81 0 0 0-3.793-.378.975.975 0 0 1-.91-.66 23.989 23.989 0 0 0-1.828-4.233Z">
      </path>
    </svg>
  </button>
  <button class="appearance-none disabled:opacity-50" type="button" aria-label="Star 5 out of 5" disabled="">
    <svg width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="shrink-0 text-slate-200 h-5 w-5">
      <path d="M12.76 4.445a.87.87 0 0 0-1.52 0 23.989 23.989 0 0 0-1.829 4.233.975.975 0 0 1-.908.66 26.133 26.133 0 0 0-3.793.378c-.688.12-.946.905-.458 1.383a27.976 27.976 0 0 0 3.031 2.57.91.91 0 0 1 .336 1.024 23.826 23.826 0 0 0-1.012 4.38c-.09.67.629 1.145 1.253.825a25.184 25.184 0 0 0 3.538-2.198 1.02 1.02 0 0 1 1.204 0 25.34 25.34 0 0 0 3.538 2.198c.624.32 1.343-.154 1.253-.825a23.823 23.823 0 0 0-1.012-4.38.91.91 0 0 1 .335-1.024 27.97 27.97 0 0 0 3.032-2.57c.488-.478.23-1.263-.458-1.383a25.81 25.81 0 0 0-3.793-.378.975.975 0 0 1-.91-.66 23.989 23.989 0 0 0-1.828-4.233Z">
      </path>
    </svg>
  </button>
</div>

Colors

PreviewCode
<div class="flex">
  <button class="appearance-none disabled:opacity-50" type="button" aria-label="Star 1 out of 5">
    <svg width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="shrink-0 text-amber-500 h-5 w-5">
      <path d="M12.76 4.445a.87.87 0 0 0-1.52 0 23.989 23.989 0 0 0-1.829 4.233.975.975 0 0 1-.908.66 26.133 26.133 0 0 0-3.793.378c-.688.12-.946.905-.458 1.383a27.976 27.976 0 0 0 3.031 2.57.91.91 0 0 1 .336 1.024 23.826 23.826 0 0 0-1.012 4.38c-.09.67.629 1.145 1.253.825a25.184 25.184 0 0 0 3.538-2.198 1.02 1.02 0 0 1 1.204 0 25.34 25.34 0 0 0 3.538 2.198c.624.32 1.343-.154 1.253-.825a23.823 23.823 0 0 0-1.012-4.38.91.91 0 0 1 .335-1.024 27.97 27.97 0 0 0 3.032-2.57c.488-.478.23-1.263-.458-1.383a25.81 25.81 0 0 0-3.793-.378.975.975 0 0 1-.91-.66 23.989 23.989 0 0 0-1.828-4.233Z">
      </path>
    </svg>
  </button>
  <button class="appearance-none disabled:opacity-50" type="button" aria-label="Star 2 out of 5">
    <svg width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="shrink-0 text-amber-500 h-5 w-5">
      <path d="M12.76 4.445a.87.87 0 0 0-1.52 0 23.989 23.989 0 0 0-1.829 4.233.975.975 0 0 1-.908.66 26.133 26.133 0 0 0-3.793.378c-.688.12-.946.905-.458 1.383a27.976 27.976 0 0 0 3.031 2.57.91.91 0 0 1 .336 1.024 23.826 23.826 0 0 0-1.012 4.38c-.09.67.629 1.145 1.253.825a25.184 25.184 0 0 0 3.538-2.198 1.02 1.02 0 0 1 1.204 0 25.34 25.34 0 0 0 3.538 2.198c.624.32 1.343-.154 1.253-.825a23.823 23.823 0 0 0-1.012-4.38.91.91 0 0 1 .335-1.024 27.97 27.97 0 0 0 3.032-2.57c.488-.478.23-1.263-.458-1.383a25.81 25.81 0 0 0-3.793-.378.975.975 0 0 1-.91-.66 23.989 23.989 0 0 0-1.828-4.233Z">
      </path>
    </svg>
  </button>
  <button class="appearance-none disabled:opacity-50" type="button" aria-label="Star 3 out of 5">
    <svg width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="shrink-0 text-amber-500 h-5 w-5">
      <path d="M12.76 4.445a.87.87 0 0 0-1.52 0 23.989 23.989 0 0 0-1.829 4.233.975.975 0 0 1-.908.66 26.133 26.133 0 0 0-3.793.378c-.688.12-.946.905-.458 1.383a27.976 27.976 0 0 0 3.031 2.57.91.91 0 0 1 .336 1.024 23.826 23.826 0 0 0-1.012 4.38c-.09.67.629 1.145 1.253.825a25.184 25.184 0 0 0 3.538-2.198 1.02 1.02 0 0 1 1.204 0 25.34 25.34 0 0 0 3.538 2.198c.624.32 1.343-.154 1.253-.825a23.823 23.823 0 0 0-1.012-4.38.91.91 0 0 1 .335-1.024 27.97 27.97 0 0 0 3.032-2.57c.488-.478.23-1.263-.458-1.383a25.81 25.81 0 0 0-3.793-.378.975.975 0 0 1-.91-.66 23.989 23.989 0 0 0-1.828-4.233Z">
      </path>
    </svg>
  </button>
  <button class="appearance-none disabled:opacity-50" type="button" aria-label="Star 4 out of 5">
    <svg width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="shrink-0 text-slate-200 h-5 w-5">
      <path d="M12.76 4.445a.87.87 0 0 0-1.52 0 23.989 23.989 0 0 0-1.829 4.233.975.975 0 0 1-.908.66 26.133 26.133 0 0 0-3.793.378c-.688.12-.946.905-.458 1.383a27.976 27.976 0 0 0 3.031 2.57.91.91 0 0 1 .336 1.024 23.826 23.826 0 0 0-1.012 4.38c-.09.67.629 1.145 1.253.825a25.184 25.184 0 0 0 3.538-2.198 1.02 1.02 0 0 1 1.204 0 25.34 25.34 0 0 0 3.538 2.198c.624.32 1.343-.154 1.253-.825a23.823 23.823 0 0 0-1.012-4.38.91.91 0 0 1 .335-1.024 27.97 27.97 0 0 0 3.032-2.57c.488-.478.23-1.263-.458-1.383a25.81 25.81 0 0 0-3.793-.378.975.975 0 0 1-.91-.66 23.989 23.989 0 0 0-1.828-4.233Z">
      </path>
    </svg>
  </button>
  <button class="appearance-none disabled:opacity-50" type="button" aria-label="Star 5 out of 5">
    <svg width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="shrink-0 text-slate-200 h-5 w-5">
      <path d="M12.76 4.445a.87.87 0 0 0-1.52 0 23.989 23.989 0 0 0-1.829 4.233.975.975 0 0 1-.908.66 26.133 26.133 0 0 0-3.793.378c-.688.12-.946.905-.458 1.383a27.976 27.976 0 0 0 3.031 2.57.91.91 0 0 1 .336 1.024 23.826 23.826 0 0 0-1.012 4.38c-.09.67.629 1.145 1.253.825a25.184 25.184 0 0 0 3.538-2.198 1.02 1.02 0 0 1 1.204 0 25.34 25.34 0 0 0 3.538 2.198c.624.32 1.343-.154 1.253-.825a23.823 23.823 0 0 0-1.012-4.38.91.91 0 0 1 .335-1.024 27.97 27.97 0 0 0 3.032-2.57c.488-.478.23-1.263-.458-1.383a25.81 25.81 0 0 0-3.793-.378.975.975 0 0 1-.91-.66 23.989 23.989 0 0 0-1.828-4.233Z">
      </path>
    </svg>
  </button>
</div>
<div class="flex">
  <button class="appearance-none disabled:opacity-50" type="button" aria-label="Star 1 out of 5">
    <svg width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="shrink-0 text-slate-600 h-5 w-5">
      <path d="M12.76 4.445a.87.87 0 0 0-1.52 0 23.989 23.989 0 0 0-1.829 4.233.975.975 0 0 1-.908.66 26.133 26.133 0 0 0-3.793.378c-.688.12-.946.905-.458 1.383a27.976 27.976 0 0 0 3.031 2.57.91.91 0 0 1 .336 1.024 23.826 23.826 0 0 0-1.012 4.38c-.09.67.629 1.145 1.253.825a25.184 25.184 0 0 0 3.538-2.198 1.02 1.02 0 0 1 1.204 0 25.34 25.34 0 0 0 3.538 2.198c.624.32 1.343-.154 1.253-.825a23.823 23.823 0 0 0-1.012-4.38.91.91 0 0 1 .335-1.024 27.97 27.97 0 0 0 3.032-2.57c.488-.478.23-1.263-.458-1.383a25.81 25.81 0 0 0-3.793-.378.975.975 0 0 1-.91-.66 23.989 23.989 0 0 0-1.828-4.233Z">
      </path>
    </svg>
  </button>
  <button class="appearance-none disabled:opacity-50" type="button" aria-label="Star 2 out of 5">
    <svg width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="shrink-0 text-slate-600 h-5 w-5">
      <path d="M12.76 4.445a.87.87 0 0 0-1.52 0 23.989 23.989 0 0 0-1.829 4.233.975.975 0 0 1-.908.66 26.133 26.133 0 0 0-3.793.378c-.688.12-.946.905-.458 1.383a27.976 27.976 0 0 0 3.031 2.57.91.91 0 0 1 .336 1.024 23.826 23.826 0 0 0-1.012 4.38c-.09.67.629 1.145 1.253.825a25.184 25.184 0 0 0 3.538-2.198 1.02 1.02 0 0 1 1.204 0 25.34 25.34 0 0 0 3.538 2.198c.624.32 1.343-.154 1.253-.825a23.823 23.823 0 0 0-1.012-4.38.91.91 0 0 1 .335-1.024 27.97 27.97 0 0 0 3.032-2.57c.488-.478.23-1.263-.458-1.383a25.81 25.81 0 0 0-3.793-.378.975.975 0 0 1-.91-.66 23.989 23.989 0 0 0-1.828-4.233Z">
      </path>
    </svg>
  </button>
  <button class="appearance-none disabled:opacity-50" type="button" aria-label="Star 3 out of 5">
    <svg width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="shrink-0 text-slate-600 h-5 w-5">
      <path d="M12.76 4.445a.87.87 0 0 0-1.52 0 23.989 23.989 0 0 0-1.829 4.233.975.975 0 0 1-.908.66 26.133 26.133 0 0 0-3.793.378c-.688.12-.946.905-.458 1.383a27.976 27.976 0 0 0 3.031 2.57.91.91 0 0 1 .336 1.024 23.826 23.826 0 0 0-1.012 4.38c-.09.67.629 1.145 1.253.825a25.184 25.184 0 0 0 3.538-2.198 1.02 1.02 0 0 1 1.204 0 25.34 25.34 0 0 0 3.538 2.198c.624.32 1.343-.154 1.253-.825a23.823 23.823 0 0 0-1.012-4.38.91.91 0 0 1 .335-1.024 27.97 27.97 0 0 0 3.032-2.57c.488-.478.23-1.263-.458-1.383a25.81 25.81 0 0 0-3.793-.378.975.975 0 0 1-.91-.66 23.989 23.989 0 0 0-1.828-4.233Z">
      </path>
    </svg>
  </button>
  <button class="appearance-none disabled:opacity-50" type="button" aria-label="Star 4 out of 5">
    <svg width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="shrink-0 text-slate-200 h-5 w-5">
      <path d="M12.76 4.445a.87.87 0 0 0-1.52 0 23.989 23.989 0 0 0-1.829 4.233.975.975 0 0 1-.908.66 26.133 26.133 0 0 0-3.793.378c-.688.12-.946.905-.458 1.383a27.976 27.976 0 0 0 3.031 2.57.91.91 0 0 1 .336 1.024 23.826 23.826 0 0 0-1.012 4.38c-.09.67.629 1.145 1.253.825a25.184 25.184 0 0 0 3.538-2.198 1.02 1.02 0 0 1 1.204 0 25.34 25.34 0 0 0 3.538 2.198c.624.32 1.343-.154 1.253-.825a23.823 23.823 0 0 0-1.012-4.38.91.91 0 0 1 .335-1.024 27.97 27.97 0 0 0 3.032-2.57c.488-.478.23-1.263-.458-1.383a25.81 25.81 0 0 0-3.793-.378.975.975 0 0 1-.91-.66 23.989 23.989 0 0 0-1.828-4.233Z">
      </path>
    </svg>
  </button>
  <button class="appearance-none disabled:opacity-50" type="button" aria-label="Star 5 out of 5">
    <svg width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="shrink-0 text-slate-200 h-5 w-5">
      <path d="M12.76 4.445a.87.87 0 0 0-1.52 0 23.989 23.989 0 0 0-1.829 4.233.975.975 0 0 1-.908.66 26.133 26.133 0 0 0-3.793.378c-.688.12-.946.905-.458 1.383a27.976 27.976 0 0 0 3.031 2.57.91.91 0 0 1 .336 1.024 23.826 23.826 0 0 0-1.012 4.38c-.09.67.629 1.145 1.253.825a25.184 25.184 0 0 0 3.538-2.198 1.02 1.02 0 0 1 1.204 0 25.34 25.34 0 0 0 3.538 2.198c.624.32 1.343-.154 1.253-.825a23.823 23.823 0 0 0-1.012-4.38.91.91 0 0 1 .335-1.024 27.97 27.97 0 0 0 3.032-2.57c.488-.478.23-1.263-.458-1.383a25.81 25.81 0 0 0-3.793-.378.975.975 0 0 1-.91-.66 23.989 23.989 0 0 0-1.828-4.233Z">
      </path>
    </svg>
  </button>
</div>
<div class="flex">
  <button class="appearance-none disabled:opacity-50" type="button" aria-label="Star 1 out of 5">
    <svg width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="shrink-0 text-red-500 h-5 w-5">
      <path d="M12.76 4.445a.87.87 0 0 0-1.52 0 23.989 23.989 0 0 0-1.829 4.233.975.975 0 0 1-.908.66 26.133 26.133 0 0 0-3.793.378c-.688.12-.946.905-.458 1.383a27.976 27.976 0 0 0 3.031 2.57.91.91 0 0 1 .336 1.024 23.826 23.826 0 0 0-1.012 4.38c-.09.67.629 1.145 1.253.825a25.184 25.184 0 0 0 3.538-2.198 1.02 1.02 0 0 1 1.204 0 25.34 25.34 0 0 0 3.538 2.198c.624.32 1.343-.154 1.253-.825a23.823 23.823 0 0 0-1.012-4.38.91.91 0 0 1 .335-1.024 27.97 27.97 0 0 0 3.032-2.57c.488-.478.23-1.263-.458-1.383a25.81 25.81 0 0 0-3.793-.378.975.975 0 0 1-.91-.66 23.989 23.989 0 0 0-1.828-4.233Z">
      </path>
    </svg>
  </button>
  <button class="appearance-none disabled:opacity-50" type="button" aria-label="Star 2 out of 5">
    <svg width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="shrink-0 text-red-500 h-5 w-5">
      <path d="M12.76 4.445a.87.87 0 0 0-1.52 0 23.989 23.989 0 0 0-1.829 4.233.975.975 0 0 1-.908.66 26.133 26.133 0 0 0-3.793.378c-.688.12-.946.905-.458 1.383a27.976 27.976 0 0 0 3.031 2.57.91.91 0 0 1 .336 1.024 23.826 23.826 0 0 0-1.012 4.38c-.09.67.629 1.145 1.253.825a25.184 25.184 0 0 0 3.538-2.198 1.02 1.02 0 0 1 1.204 0 25.34 25.34 0 0 0 3.538 2.198c.624.32 1.343-.154 1.253-.825a23.823 23.823 0 0 0-1.012-4.38.91.91 0 0 1 .335-1.024 27.97 27.97 0 0 0 3.032-2.57c.488-.478.23-1.263-.458-1.383a25.81 25.81 0 0 0-3.793-.378.975.975 0 0 1-.91-.66 23.989 23.989 0 0 0-1.828-4.233Z">
      </path>
    </svg>
  </button>
  <button class="appearance-none disabled:opacity-50" type="button" aria-label="Star 3 out of 5">
    <svg width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="shrink-0 text-red-500 h-5 w-5">
      <path d="M12.76 4.445a.87.87 0 0 0-1.52 0 23.989 23.989 0 0 0-1.829 4.233.975.975 0 0 1-.908.66 26.133 26.133 0 0 0-3.793.378c-.688.12-.946.905-.458 1.383a27.976 27.976 0 0 0 3.031 2.57.91.91 0 0 1 .336 1.024 23.826 23.826 0 0 0-1.012 4.38c-.09.67.629 1.145 1.253.825a25.184 25.184 0 0 0 3.538-2.198 1.02 1.02 0 0 1 1.204 0 25.34 25.34 0 0 0 3.538 2.198c.624.32 1.343-.154 1.253-.825a23.823 23.823 0 0 0-1.012-4.38.91.91 0 0 1 .335-1.024 27.97 27.97 0 0 0 3.032-2.57c.488-.478.23-1.263-.458-1.383a25.81 25.81 0 0 0-3.793-.378.975.975 0 0 1-.91-.66 23.989 23.989 0 0 0-1.828-4.233Z">
      </path>
    </svg>
  </button>
  <button class="appearance-none disabled:opacity-50" type="button" aria-label="Star 4 out of 5">
    <svg width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="shrink-0 text-slate-200 h-5 w-5">
      <path d="M12.76 4.445a.87.87 0 0 0-1.52 0 23.989 23.989 0 0 0-1.829 4.233.975.975 0 0 1-.908.66 26.133 26.133 0 0 0-3.793.378c-.688.12-.946.905-.458 1.383a27.976 27.976 0 0 0 3.031 2.57.91.91 0 0 1 .336 1.024 23.826 23.826 0 0 0-1.012 4.38c-.09.67.629 1.145 1.253.825a25.184 25.184 0 0 0 3.538-2.198 1.02 1.02 0 0 1 1.204 0 25.34 25.34 0 0 0 3.538 2.198c.624.32 1.343-.154 1.253-.825a23.823 23.823 0 0 0-1.012-4.38.91.91 0 0 1 .335-1.024 27.97 27.97 0 0 0 3.032-2.57c.488-.478.23-1.263-.458-1.383a25.81 25.81 0 0 0-3.793-.378.975.975 0 0 1-.91-.66 23.989 23.989 0 0 0-1.828-4.233Z">
      </path>
    </svg>
  </button>
  <button class="appearance-none disabled:opacity-50" type="button" aria-label="Star 5 out of 5">
    <svg width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="shrink-0 text-slate-200 h-5 w-5">
      <path d="M12.76 4.445a.87.87 0 0 0-1.52 0 23.989 23.989 0 0 0-1.829 4.233.975.975 0 0 1-.908.66 26.133 26.133 0 0 0-3.793.378c-.688.12-.946.905-.458 1.383a27.976 27.976 0 0 0 3.031 2.57.91.91 0 0 1 .336 1.024 23.826 23.826 0 0 0-1.012 4.38c-.09.67.629 1.145 1.253.825a25.184 25.184 0 0 0 3.538-2.198 1.02 1.02 0 0 1 1.204 0 25.34 25.34 0 0 0 3.538 2.198c.624.32 1.343-.154 1.253-.825a23.823 23.823 0 0 0-1.012-4.38.91.91 0 0 1 .335-1.024 27.97 27.97 0 0 0 3.032-2.57c.488-.478.23-1.263-.458-1.383a25.81 25.81 0 0 0-3.793-.378.975.975 0 0 1-.91-.66 23.989 23.989 0 0 0-1.828-4.233Z">
      </path>
    </svg>
  </button>
</div>
<div class="flex">
  <button class="appearance-none disabled:opacity-50" type="button" aria-label="Star 1 out of 5">
    <svg width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="shrink-0 text-emerald-500 h-5 w-5">
      <path d="M12.76 4.445a.87.87 0 0 0-1.52 0 23.989 23.989 0 0 0-1.829 4.233.975.975 0 0 1-.908.66 26.133 26.133 0 0 0-3.793.378c-.688.12-.946.905-.458 1.383a27.976 27.976 0 0 0 3.031 2.57.91.91 0 0 1 .336 1.024 23.826 23.826 0 0 0-1.012 4.38c-.09.67.629 1.145 1.253.825a25.184 25.184 0 0 0 3.538-2.198 1.02 1.02 0 0 1 1.204 0 25.34 25.34 0 0 0 3.538 2.198c.624.32 1.343-.154 1.253-.825a23.823 23.823 0 0 0-1.012-4.38.91.91 0 0 1 .335-1.024 27.97 27.97 0 0 0 3.032-2.57c.488-.478.23-1.263-.458-1.383a25.81 25.81 0 0 0-3.793-.378.975.975 0 0 1-.91-.66 23.989 23.989 0 0 0-1.828-4.233Z">
      </path>
    </svg>
  </button>
  <button class="appearance-none disabled:opacity-50" type="button" aria-label="Star 2 out of 5">
    <svg width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="shrink-0 text-emerald-500 h-5 w-5">
      <path d="M12.76 4.445a.87.87 0 0 0-1.52 0 23.989 23.989 0 0 0-1.829 4.233.975.975 0 0 1-.908.66 26.133 26.133 0 0 0-3.793.378c-.688.12-.946.905-.458 1.383a27.976 27.976 0 0 0 3.031 2.57.91.91 0 0 1 .336 1.024 23.826 23.826 0 0 0-1.012 4.38c-.09.67.629 1.145 1.253.825a25.184 25.184 0 0 0 3.538-2.198 1.02 1.02 0 0 1 1.204 0 25.34 25.34 0 0 0 3.538 2.198c.624.32 1.343-.154 1.253-.825a23.823 23.823 0 0 0-1.012-4.38.91.91 0 0 1 .335-1.024 27.97 27.97 0 0 0 3.032-2.57c.488-.478.23-1.263-.458-1.383a25.81 25.81 0 0 0-3.793-.378.975.975 0 0 1-.91-.66 23.989 23.989 0 0 0-1.828-4.233Z">
      </path>
    </svg>
  </button>
  <button class="appearance-none disabled:opacity-50" type="button" aria-label="Star 3 out of 5">
    <svg width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="shrink-0 text-emerald-500 h-5 w-5">
      <path d="M12.76 4.445a.87.87 0 0 0-1.52 0 23.989 23.989 0 0 0-1.829 4.233.975.975 0 0 1-.908.66 26.133 26.133 0 0 0-3.793.378c-.688.12-.946.905-.458 1.383a27.976 27.976 0 0 0 3.031 2.57.91.91 0 0 1 .336 1.024 23.826 23.826 0 0 0-1.012 4.38c-.09.67.629 1.145 1.253.825a25.184 25.184 0 0 0 3.538-2.198 1.02 1.02 0 0 1 1.204 0 25.34 25.34 0 0 0 3.538 2.198c.624.32 1.343-.154 1.253-.825a23.823 23.823 0 0 0-1.012-4.38.91.91 0 0 1 .335-1.024 27.97 27.97 0 0 0 3.032-2.57c.488-.478.23-1.263-.458-1.383a25.81 25.81 0 0 0-3.793-.378.975.975 0 0 1-.91-.66 23.989 23.989 0 0 0-1.828-4.233Z">
      </path>
    </svg>
  </button>
  <button class="appearance-none disabled:opacity-50" type="button" aria-label="Star 4 out of 5">
    <svg width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="shrink-0 text-slate-200 h-5 w-5">
      <path d="M12.76 4.445a.87.87 0 0 0-1.52 0 23.989 23.989 0 0 0-1.829 4.233.975.975 0 0 1-.908.66 26.133 26.133 0 0 0-3.793.378c-.688.12-.946.905-.458 1.383a27.976 27.976 0 0 0 3.031 2.57.91.91 0 0 1 .336 1.024 23.826 23.826 0 0 0-1.012 4.38c-.09.67.629 1.145 1.253.825a25.184 25.184 0 0 0 3.538-2.198 1.02 1.02 0 0 1 1.204 0 25.34 25.34 0 0 0 3.538 2.198c.624.32 1.343-.154 1.253-.825a23.823 23.823 0 0 0-1.012-4.38.91.91 0 0 1 .335-1.024 27.97 27.97 0 0 0 3.032-2.57c.488-.478.23-1.263-.458-1.383a25.81 25.81 0 0 0-3.793-.378.975.975 0 0 1-.91-.66 23.989 23.989 0 0 0-1.828-4.233Z">
      </path>
    </svg>
  </button>
  <button class="appearance-none disabled:opacity-50" type="button" aria-label="Star 5 out of 5">
    <svg width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="shrink-0 text-slate-200 h-5 w-5">
      <path d="M12.76 4.445a.87.87 0 0 0-1.52 0 23.989 23.989 0 0 0-1.829 4.233.975.975 0 0 1-.908.66 26.133 26.133 0 0 0-3.793.378c-.688.12-.946.905-.458 1.383a27.976 27.976 0 0 0 3.031 2.57.91.91 0 0 1 .336 1.024 23.826 23.826 0 0 0-1.012 4.38c-.09.67.629 1.145 1.253.825a25.184 25.184 0 0 0 3.538-2.198 1.02 1.02 0 0 1 1.204 0 25.34 25.34 0 0 0 3.538 2.198c.624.32 1.343-.154 1.253-.825a23.823 23.823 0 0 0-1.012-4.38.91.91 0 0 1 .335-1.024 27.97 27.97 0 0 0 3.032-2.57c.488-.478.23-1.263-.458-1.383a25.81 25.81 0 0 0-3.793-.378.975.975 0 0 1-.91-.66 23.989 23.989 0 0 0-1.828-4.233Z">
      </path>
    </svg>
  </button>
</div>

Sizes

PreviewCode
<div class="flex">
  <button class="appearance-none disabled:opacity-50" type="button" aria-label="Star 1 out of 5">
    <svg width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="shrink-0 text-amber-500 h-3 w-3">
      <path d="M12.76 4.445a.87.87 0 0 0-1.52 0 23.989 23.989 0 0 0-1.829 4.233.975.975 0 0 1-.908.66 26.133 26.133 0 0 0-3.793.378c-.688.12-.946.905-.458 1.383a27.976 27.976 0 0 0 3.031 2.57.91.91 0 0 1 .336 1.024 23.826 23.826 0 0 0-1.012 4.38c-.09.67.629 1.145 1.253.825a25.184 25.184 0 0 0 3.538-2.198 1.02 1.02 0 0 1 1.204 0 25.34 25.34 0 0 0 3.538 2.198c.624.32 1.343-.154 1.253-.825a23.823 23.823 0 0 0-1.012-4.38.91.91 0 0 1 .335-1.024 27.97 27.97 0 0 0 3.032-2.57c.488-.478.23-1.263-.458-1.383a25.81 25.81 0 0 0-3.793-.378.975.975 0 0 1-.91-.66 23.989 23.989 0 0 0-1.828-4.233Z">
      </path>
    </svg>
  </button>
  <button class="appearance-none disabled:opacity-50" type="button" aria-label="Star 2 out of 5">
    <svg width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="shrink-0 text-amber-500 h-3 w-3">
      <path d="M12.76 4.445a.87.87 0 0 0-1.52 0 23.989 23.989 0 0 0-1.829 4.233.975.975 0 0 1-.908.66 26.133 26.133 0 0 0-3.793.378c-.688.12-.946.905-.458 1.383a27.976 27.976 0 0 0 3.031 2.57.91.91 0 0 1 .336 1.024 23.826 23.826 0 0 0-1.012 4.38c-.09.67.629 1.145 1.253.825a25.184 25.184 0 0 0 3.538-2.198 1.02 1.02 0 0 1 1.204 0 25.34 25.34 0 0 0 3.538 2.198c.624.32 1.343-.154 1.253-.825a23.823 23.823 0 0 0-1.012-4.38.91.91 0 0 1 .335-1.024 27.97 27.97 0 0 0 3.032-2.57c.488-.478.23-1.263-.458-1.383a25.81 25.81 0 0 0-3.793-.378.975.975 0 0 1-.91-.66 23.989 23.989 0 0 0-1.828-4.233Z">
      </path>
    </svg>
  </button>
  <button class="appearance-none disabled:opacity-50" type="button" aria-label="Star 3 out of 5">
    <svg width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="shrink-0 text-amber-500 h-3 w-3">
      <path d="M12.76 4.445a.87.87 0 0 0-1.52 0 23.989 23.989 0 0 0-1.829 4.233.975.975 0 0 1-.908.66 26.133 26.133 0 0 0-3.793.378c-.688.12-.946.905-.458 1.383a27.976 27.976 0 0 0 3.031 2.57.91.91 0 0 1 .336 1.024 23.826 23.826 0 0 0-1.012 4.38c-.09.67.629 1.145 1.253.825a25.184 25.184 0 0 0 3.538-2.198 1.02 1.02 0 0 1 1.204 0 25.34 25.34 0 0 0 3.538 2.198c.624.32 1.343-.154 1.253-.825a23.823 23.823 0 0 0-1.012-4.38.91.91 0 0 1 .335-1.024 27.97 27.97 0 0 0 3.032-2.57c.488-.478.23-1.263-.458-1.383a25.81 25.81 0 0 0-3.793-.378.975.975 0 0 1-.91-.66 23.989 23.989 0 0 0-1.828-4.233Z">
      </path>
    </svg>
  </button>
  <button class="appearance-none disabled:opacity-50" type="button" aria-label="Star 4 out of 5">
    <svg width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="shrink-0 text-slate-200 h-3 w-3">
      <path d="M12.76 4.445a.87.87 0 0 0-1.52 0 23.989 23.989 0 0 0-1.829 4.233.975.975 0 0 1-.908.66 26.133 26.133 0 0 0-3.793.378c-.688.12-.946.905-.458 1.383a27.976 27.976 0 0 0 3.031 2.57.91.91 0 0 1 .336 1.024 23.826 23.826 0 0 0-1.012 4.38c-.09.67.629 1.145 1.253.825a25.184 25.184 0 0 0 3.538-2.198 1.02 1.02 0 0 1 1.204 0 25.34 25.34 0 0 0 3.538 2.198c.624.32 1.343-.154 1.253-.825a23.823 23.823 0 0 0-1.012-4.38.91.91 0 0 1 .335-1.024 27.97 27.97 0 0 0 3.032-2.57c.488-.478.23-1.263-.458-1.383a25.81 25.81 0 0 0-3.793-.378.975.975 0 0 1-.91-.66 23.989 23.989 0 0 0-1.828-4.233Z">
      </path>
    </svg>
  </button>
  <button class="appearance-none disabled:opacity-50" type="button" aria-label="Star 5 out of 5">
    <svg width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="shrink-0 text-slate-200 h-3 w-3">
      <path d="M12.76 4.445a.87.87 0 0 0-1.52 0 23.989 23.989 0 0 0-1.829 4.233.975.975 0 0 1-.908.66 26.133 26.133 0 0 0-3.793.378c-.688.12-.946.905-.458 1.383a27.976 27.976 0 0 0 3.031 2.57.91.91 0 0 1 .336 1.024 23.826 23.826 0 0 0-1.012 4.38c-.09.67.629 1.145 1.253.825a25.184 25.184 0 0 0 3.538-2.198 1.02 1.02 0 0 1 1.204 0 25.34 25.34 0 0 0 3.538 2.198c.624.32 1.343-.154 1.253-.825a23.823 23.823 0 0 0-1.012-4.38.91.91 0 0 1 .335-1.024 27.97 27.97 0 0 0 3.032-2.57c.488-.478.23-1.263-.458-1.383a25.81 25.81 0 0 0-3.793-.378.975.975 0 0 1-.91-.66 23.989 23.989 0 0 0-1.828-4.233Z">
      </path>
    </svg>
  </button>
</div>
<div class="flex">
  <button class="appearance-none disabled:opacity-50" type="button" aria-label="Star 1 out of 5">
    <svg width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="shrink-0 text-amber-500 h-5 w-5">
      <path d="M12.76 4.445a.87.87 0 0 0-1.52 0 23.989 23.989 0 0 0-1.829 4.233.975.975 0 0 1-.908.66 26.133 26.133 0 0 0-3.793.378c-.688.12-.946.905-.458 1.383a27.976 27.976 0 0 0 3.031 2.57.91.91 0 0 1 .336 1.024 23.826 23.826 0 0 0-1.012 4.38c-.09.67.629 1.145 1.253.825a25.184 25.184 0 0 0 3.538-2.198 1.02 1.02 0 0 1 1.204 0 25.34 25.34 0 0 0 3.538 2.198c.624.32 1.343-.154 1.253-.825a23.823 23.823 0 0 0-1.012-4.38.91.91 0 0 1 .335-1.024 27.97 27.97 0 0 0 3.032-2.57c.488-.478.23-1.263-.458-1.383a25.81 25.81 0 0 0-3.793-.378.975.975 0 0 1-.91-.66 23.989 23.989 0 0 0-1.828-4.233Z">
      </path>
    </svg>
  </button>
  <button class="appearance-none disabled:opacity-50" type="button" aria-label="Star 2 out of 5">
    <svg width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="shrink-0 text-amber-500 h-5 w-5">
      <path d="M12.76 4.445a.87.87 0 0 0-1.52 0 23.989 23.989 0 0 0-1.829 4.233.975.975 0 0 1-.908.66 26.133 26.133 0 0 0-3.793.378c-.688.12-.946.905-.458 1.383a27.976 27.976 0 0 0 3.031 2.57.91.91 0 0 1 .336 1.024 23.826 23.826 0 0 0-1.012 4.38c-.09.67.629 1.145 1.253.825a25.184 25.184 0 0 0 3.538-2.198 1.02 1.02 0 0 1 1.204 0 25.34 25.34 0 0 0 3.538 2.198c.624.32 1.343-.154 1.253-.825a23.823 23.823 0 0 0-1.012-4.38.91.91 0 0 1 .335-1.024 27.97 27.97 0 0 0 3.032-2.57c.488-.478.23-1.263-.458-1.383a25.81 25.81 0 0 0-3.793-.378.975.975 0 0 1-.91-.66 23.989 23.989 0 0 0-1.828-4.233Z">
      </path>
    </svg>
  </button>
  <button class="appearance-none disabled:opacity-50" type="button" aria-label="Star 3 out of 5">
    <svg width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="shrink-0 text-amber-500 h-5 w-5">
      <path d="M12.76 4.445a.87.87 0 0 0-1.52 0 23.989 23.989 0 0 0-1.829 4.233.975.975 0 0 1-.908.66 26.133 26.133 0 0 0-3.793.378c-.688.12-.946.905-.458 1.383a27.976 27.976 0 0 0 3.031 2.57.91.91 0 0 1 .336 1.024 23.826 23.826 0 0 0-1.012 4.38c-.09.67.629 1.145 1.253.825a25.184 25.184 0 0 0 3.538-2.198 1.02 1.02 0 0 1 1.204 0 25.34 25.34 0 0 0 3.538 2.198c.624.32 1.343-.154 1.253-.825a23.823 23.823 0 0 0-1.012-4.38.91.91 0 0 1 .335-1.024 27.97 27.97 0 0 0 3.032-2.57c.488-.478.23-1.263-.458-1.383a25.81 25.81 0 0 0-3.793-.378.975.975 0 0 1-.91-.66 23.989 23.989 0 0 0-1.828-4.233Z">
      </path>
    </svg>
  </button>
  <button class="appearance-none disabled:opacity-50" type="button" aria-label="Star 4 out of 5">
    <svg width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="shrink-0 text-slate-200 h-5 w-5">
      <path d="M12.76 4.445a.87.87 0 0 0-1.52 0 23.989 23.989 0 0 0-1.829 4.233.975.975 0 0 1-.908.66 26.133 26.133 0 0 0-3.793.378c-.688.12-.946.905-.458 1.383a27.976 27.976 0 0 0 3.031 2.57.91.91 0 0 1 .336 1.024 23.826 23.826 0 0 0-1.012 4.38c-.09.67.629 1.145 1.253.825a25.184 25.184 0 0 0 3.538-2.198 1.02 1.02 0 0 1 1.204 0 25.34 25.34 0 0 0 3.538 2.198c.624.32 1.343-.154 1.253-.825a23.823 23.823 0 0 0-1.012-4.38.91.91 0 0 1 .335-1.024 27.97 27.97 0 0 0 3.032-2.57c.488-.478.23-1.263-.458-1.383a25.81 25.81 0 0 0-3.793-.378.975.975 0 0 1-.91-.66 23.989 23.989 0 0 0-1.828-4.233Z">
      </path>
    </svg>
  </button>
  <button class="appearance-none disabled:opacity-50" type="button" aria-label="Star 5 out of 5">
    <svg width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="shrink-0 text-slate-200 h-5 w-5">
      <path d="M12.76 4.445a.87.87 0 0 0-1.52 0 23.989 23.989 0 0 0-1.829 4.233.975.975 0 0 1-.908.66 26.133 26.133 0 0 0-3.793.378c-.688.12-.946.905-.458 1.383a27.976 27.976 0 0 0 3.031 2.57.91.91 0 0 1 .336 1.024 23.826 23.826 0 0 0-1.012 4.38c-.09.67.629 1.145 1.253.825a25.184 25.184 0 0 0 3.538-2.198 1.02 1.02 0 0 1 1.204 0 25.34 25.34 0 0 0 3.538 2.198c.624.32 1.343-.154 1.253-.825a23.823 23.823 0 0 0-1.012-4.38.91.91 0 0 1 .335-1.024 27.97 27.97 0 0 0 3.032-2.57c.488-.478.23-1.263-.458-1.383a25.81 25.81 0 0 0-3.793-.378.975.975 0 0 1-.91-.66 23.989 23.989 0 0 0-1.828-4.233Z">
      </path>
    </svg>
  </button>
</div>
<div class="flex">
  <button class="appearance-none disabled:opacity-50" type="button" aria-label="Star 1 out of 5">
    <svg width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="shrink-0 text-amber-500 h-8 w-8">
      <path d="M12.76 4.445a.87.87 0 0 0-1.52 0 23.989 23.989 0 0 0-1.829 4.233.975.975 0 0 1-.908.66 26.133 26.133 0 0 0-3.793.378c-.688.12-.946.905-.458 1.383a27.976 27.976 0 0 0 3.031 2.57.91.91 0 0 1 .336 1.024 23.826 23.826 0 0 0-1.012 4.38c-.09.67.629 1.145 1.253.825a25.184 25.184 0 0 0 3.538-2.198 1.02 1.02 0 0 1 1.204 0 25.34 25.34 0 0 0 3.538 2.198c.624.32 1.343-.154 1.253-.825a23.823 23.823 0 0 0-1.012-4.38.91.91 0 0 1 .335-1.024 27.97 27.97 0 0 0 3.032-2.57c.488-.478.23-1.263-.458-1.383a25.81 25.81 0 0 0-3.793-.378.975.975 0 0 1-.91-.66 23.989 23.989 0 0 0-1.828-4.233Z">
      </path>
    </svg>
  </button>
  <button class="appearance-none disabled:opacity-50" type="button" aria-label="Star 2 out of 5">
    <svg width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="shrink-0 text-amber-500 h-8 w-8">
      <path d="M12.76 4.445a.87.87 0 0 0-1.52 0 23.989 23.989 0 0 0-1.829 4.233.975.975 0 0 1-.908.66 26.133 26.133 0 0 0-3.793.378c-.688.12-.946.905-.458 1.383a27.976 27.976 0 0 0 3.031 2.57.91.91 0 0 1 .336 1.024 23.826 23.826 0 0 0-1.012 4.38c-.09.67.629 1.145 1.253.825a25.184 25.184 0 0 0 3.538-2.198 1.02 1.02 0 0 1 1.204 0 25.34 25.34 0 0 0 3.538 2.198c.624.32 1.343-.154 1.253-.825a23.823 23.823 0 0 0-1.012-4.38.91.91 0 0 1 .335-1.024 27.97 27.97 0 0 0 3.032-2.57c.488-.478.23-1.263-.458-1.383a25.81 25.81 0 0 0-3.793-.378.975.975 0 0 1-.91-.66 23.989 23.989 0 0 0-1.828-4.233Z">
      </path>
    </svg>
  </button>
  <button class="appearance-none disabled:opacity-50" type="button" aria-label="Star 3 out of 5">
    <svg width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="shrink-0 text-amber-500 h-8 w-8">
      <path d="M12.76 4.445a.87.87 0 0 0-1.52 0 23.989 23.989 0 0 0-1.829 4.233.975.975 0 0 1-.908.66 26.133 26.133 0 0 0-3.793.378c-.688.12-.946.905-.458 1.383a27.976 27.976 0 0 0 3.031 2.57.91.91 0 0 1 .336 1.024 23.826 23.826 0 0 0-1.012 4.38c-.09.67.629 1.145 1.253.825a25.184 25.184 0 0 0 3.538-2.198 1.02 1.02 0 0 1 1.204 0 25.34 25.34 0 0 0 3.538 2.198c.624.32 1.343-.154 1.253-.825a23.823 23.823 0 0 0-1.012-4.38.91.91 0 0 1 .335-1.024 27.97 27.97 0 0 0 3.032-2.57c.488-.478.23-1.263-.458-1.383a25.81 25.81 0 0 0-3.793-.378.975.975 0 0 1-.91-.66 23.989 23.989 0 0 0-1.828-4.233Z">
      </path>
    </svg>
  </button>
  <button class="appearance-none disabled:opacity-50" type="button" aria-label="Star 4 out of 5">
    <svg width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="shrink-0 text-slate-200 h-8 w-8">
      <path d="M12.76 4.445a.87.87 0 0 0-1.52 0 23.989 23.989 0 0 0-1.829 4.233.975.975 0 0 1-.908.66 26.133 26.133 0 0 0-3.793.378c-.688.12-.946.905-.458 1.383a27.976 27.976 0 0 0 3.031 2.57.91.91 0 0 1 .336 1.024 23.826 23.826 0 0 0-1.012 4.38c-.09.67.629 1.145 1.253.825a25.184 25.184 0 0 0 3.538-2.198 1.02 1.02 0 0 1 1.204 0 25.34 25.34 0 0 0 3.538 2.198c.624.32 1.343-.154 1.253-.825a23.823 23.823 0 0 0-1.012-4.38.91.91 0 0 1 .335-1.024 27.97 27.97 0 0 0 3.032-2.57c.488-.478.23-1.263-.458-1.383a25.81 25.81 0 0 0-3.793-.378.975.975 0 0 1-.91-.66 23.989 23.989 0 0 0-1.828-4.233Z">
      </path>
    </svg>
  </button>
  <button class="appearance-none disabled:opacity-50" type="button" aria-label="Star 5 out of 5">
    <svg width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="shrink-0 text-slate-200 h-8 w-8">
      <path d="M12.76 4.445a.87.87 0 0 0-1.52 0 23.989 23.989 0 0 0-1.829 4.233.975.975 0 0 1-.908.66 26.133 26.133 0 0 0-3.793.378c-.688.12-.946.905-.458 1.383a27.976 27.976 0 0 0 3.031 2.57.91.91 0 0 1 .336 1.024 23.826 23.826 0 0 0-1.012 4.38c-.09.67.629 1.145 1.253.825a25.184 25.184 0 0 0 3.538-2.198 1.02 1.02 0 0 1 1.204 0 25.34 25.34 0 0 0 3.538 2.198c.624.32 1.343-.154 1.253-.825a23.823 23.823 0 0 0-1.012-4.38.91.91 0 0 1 .335-1.024 27.97 27.97 0 0 0 3.032-2.57c.488-.478.23-1.263-.458-1.383a25.81 25.81 0 0 0-3.793-.378.975.975 0 0 1-.91-.66 23.989 23.989 0 0 0-1.828-4.233Z">
      </path>
    </svg>
  </button>
</div>

View Only

PreviewCode
<div class="flex">
  <span class="sr-only">4 out of 5 stars</span>
  <svg width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="shrink-0 text-amber-500 h-5 w-5">
    <path d="M12.76 4.445a.87.87 0 0 0-1.52 0 23.989 23.989 0 0 0-1.829 4.233.975.975 0 0 1-.908.66 26.133 26.133 0 0 0-3.793.378c-.688.12-.946.905-.458 1.383a27.976 27.976 0 0 0 3.031 2.57.91.91 0 0 1 .336 1.024 23.826 23.826 0 0 0-1.012 4.38c-.09.67.629 1.145 1.253.825a25.184 25.184 0 0 0 3.538-2.198 1.02 1.02 0 0 1 1.204 0 25.34 25.34 0 0 0 3.538 2.198c.624.32 1.343-.154 1.253-.825a23.823 23.823 0 0 0-1.012-4.38.91.91 0 0 1 .335-1.024 27.97 27.97 0 0 0 3.032-2.57c.488-.478.23-1.263-.458-1.383a25.81 25.81 0 0 0-3.793-.378.975.975 0 0 1-.91-.66 23.989 23.989 0 0 0-1.828-4.233Z">
    </path>
  </svg>
  <svg width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="shrink-0 text-amber-500 h-5 w-5">
    <path d="M12.76 4.445a.87.87 0 0 0-1.52 0 23.989 23.989 0 0 0-1.829 4.233.975.975 0 0 1-.908.66 26.133 26.133 0 0 0-3.793.378c-.688.12-.946.905-.458 1.383a27.976 27.976 0 0 0 3.031 2.57.91.91 0 0 1 .336 1.024 23.826 23.826 0 0 0-1.012 4.38c-.09.67.629 1.145 1.253.825a25.184 25.184 0 0 0 3.538-2.198 1.02 1.02 0 0 1 1.204 0 25.34 25.34 0 0 0 3.538 2.198c.624.32 1.343-.154 1.253-.825a23.823 23.823 0 0 0-1.012-4.38.91.91 0 0 1 .335-1.024 27.97 27.97 0 0 0 3.032-2.57c.488-.478.23-1.263-.458-1.383a25.81 25.81 0 0 0-3.793-.378.975.975 0 0 1-.91-.66 23.989 23.989 0 0 0-1.828-4.233Z">
    </path>
  </svg>
  <svg width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="shrink-0 text-amber-500 h-5 w-5">
    <path d="M12.76 4.445a.87.87 0 0 0-1.52 0 23.989 23.989 0 0 0-1.829 4.233.975.975 0 0 1-.908.66 26.133 26.133 0 0 0-3.793.378c-.688.12-.946.905-.458 1.383a27.976 27.976 0 0 0 3.031 2.57.91.91 0 0 1 .336 1.024 23.826 23.826 0 0 0-1.012 4.38c-.09.67.629 1.145 1.253.825a25.184 25.184 0 0 0 3.538-2.198 1.02 1.02 0 0 1 1.204 0 25.34 25.34 0 0 0 3.538 2.198c.624.32 1.343-.154 1.253-.825a23.823 23.823 0 0 0-1.012-4.38.91.91 0 0 1 .335-1.024 27.97 27.97 0 0 0 3.032-2.57c.488-.478.23-1.263-.458-1.383a25.81 25.81 0 0 0-3.793-.378.975.975 0 0 1-.91-.66 23.989 23.989 0 0 0-1.828-4.233Z">
    </path>
  </svg>
  <svg width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="shrink-0 text-amber-500 h-5 w-5">
    <path d="M12.76 4.445a.87.87 0 0 0-1.52 0 23.989 23.989 0 0 0-1.829 4.233.975.975 0 0 1-.908.66 26.133 26.133 0 0 0-3.793.378c-.688.12-.946.905-.458 1.383a27.976 27.976 0 0 0 3.031 2.57.91.91 0 0 1 .336 1.024 23.826 23.826 0 0 0-1.012 4.38c-.09.67.629 1.145 1.253.825a25.184 25.184 0 0 0 3.538-2.198 1.02 1.02 0 0 1 1.204 0 25.34 25.34 0 0 0 3.538 2.198c.624.32 1.343-.154 1.253-.825a23.823 23.823 0 0 0-1.012-4.38.91.91 0 0 1 .335-1.024 27.97 27.97 0 0 0 3.032-2.57c.488-.478.23-1.263-.458-1.383a25.81 25.81 0 0 0-3.793-.378.975.975 0 0 1-.91-.66 23.989 23.989 0 0 0-1.828-4.233Z">
    </path>
  </svg>
  <svg width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="shrink-0 text-slate-200 h-5 w-5">
    <path d="M12.76 4.445a.87.87 0 0 0-1.52 0 23.989 23.989 0 0 0-1.829 4.233.975.975 0 0 1-.908.66 26.133 26.133 0 0 0-3.793.378c-.688.12-.946.905-.458 1.383a27.976 27.976 0 0 0 3.031 2.57.91.91 0 0 1 .336 1.024 23.826 23.826 0 0 0-1.012 4.38c-.09.67.629 1.145 1.253.825a25.184 25.184 0 0 0 3.538-2.198 1.02 1.02 0 0 1 1.204 0 25.34 25.34 0 0 0 3.538 2.198c.624.32 1.343-.154 1.253-.825a23.823 23.823 0 0 0-1.012-4.38.91.91 0 0 1 .335-1.024 27.97 27.97 0 0 0 3.032-2.57c.488-.478.23-1.263-.458-1.383a25.81 25.81 0 0 0-3.793-.378.975.975 0 0 1-.91-.66 23.989 23.989 0 0 0-1.828-4.233Z">
    </path>
  </svg>
</div>
4 out of 5 stars