Star Rating

Rating displayed as filled/unfilled stars.

html

<div class="rating" data-rating="4" style="--accent:#E8A020;">
  <span class="rating__label">Editor&#39;s pick</span>
  <span class="rating__stars" aria-label="4 out of 5 stars">
    <span class="rating__fill" aria-hidden="true">&#9733;&#9733;&#9733;&#9733;&#9733;</span>
    <span class="rating__empty" aria-hidden="true">&#9733;&#9733;&#9733;&#9733;&#9733;</span>
  </span>
  <span class="rating__number">4.0 out of 5</span>
</div>
<style>
.rating { font: 15px system-ui, sans-serif; color: #241430; display: flex; align-items: center; gap: 10px; }
.rating__label { font-weight: 600; }
.rating__stars { position: relative; display: inline-block; font-size: 18px; letter-spacing: 2px; line-height: 1; }
.rating__empty { color: #24143025; }
.rating__fill { position: absolute; inset: 0; overflow: hidden; color: var(--accent); width: 0; }
.rating[data-rating="3"] .rating__fill { width: 60%; }
.rating[data-rating="4"] .rating__fill { width: 80%; }
.rating[data-rating="5"] .rating__fill { width: 100%; }
.rating__number { font-size: 13px; color: #241430aa; }
</style>

tailwind

<div class="rating-tw rating-tw--4 flex items-center gap-2.5 font-sans text-[15px] text-[#241430]">
  <span class="font-semibold">Editor&#39;s pick</span>
  <span class="relative inline-block text-lg tracking-widest leading-none" aria-label="4 out of 5 stars">
    <span class="text-[#24143025]" aria-hidden="true">&#9733;&#9733;&#9733;&#9733;&#9733;</span>
    <span class="rating-tw__fill absolute inset-0 overflow-hidden" style="color:#E8A020;" aria-hidden="true">&#9733;&#9733;&#9733;&#9733;&#9733;</span>
  </span>
  <span class="text-[13px] text-[#241430]/65">4.0 out of 5</span>
</div>
<style>
.rating-tw--3 .rating-tw__fill { width: 60%; }
.rating-tw--4 .rating-tw__fill { width: 80%; }
.rating-tw--5 .rating-tw__fill { width: 100%; }
</style>

react

export function StarRating({
  label = "Editor's pick",
  rating = "4",
  accent = "#E8A020",
  showNumber = true,
}) {
  const pct = { "3": "60%", "4": "80%", "5": "100%" }[rating] ?? "80%";
  return (
    <div style={{ font: "15px system-ui, sans-serif", color: "#241430", display: "flex", alignItems: "center", gap: 10 }}>
      <span style={{ fontWeight: 600 }}>{label}</span>
      <span aria-label={`${rating} out of 5 stars`} style={{ position: "relative", display: "inline-block",
        fontSize: 18, letterSpacing: 2, lineHeight: 1 }}>
        <span aria-hidden="true" style={{ color: "#24143025" }}>&#9733;&#9733;&#9733;&#9733;&#9733;</span>
        <span aria-hidden="true" style={{ position: "absolute", inset: 0, overflow: "hidden", color: accent, width: pct }}>&#9733;&#9733;&#9733;&#9733;&#9733;</span>
      </span>
      {showNumber && <span style={{ fontSize: 13, color: "#241430aa" }}>{rating}.0 out of 5</span>}
    </div>
  );
}