Rating summary with reviews

Create a review section with Tailwind CSS: a left panel showing an oversized average score, a five-star row, the total review count, and a five-row distribution where each row has a star number, a thin proportional bar, and a percentage. On the right, a list of two or three individual reviews, each with an avatar, name, a verified-customer chip, a small star row, a date, a bold one-line summary, and a short body paragraph, separated by dividers. Two columns on lg, stacked on mobile.

<section class="mx-auto grid max-w-5xl gap-12 px-6 py-16 lg:grid-cols-3">
  <div class="lg:sticky lg:top-24 lg:self-start">
    <p class="text-6xl font-semibold tracking-tight text-neutral-900">4.8</p>
    <div class="mt-2 text-amber-400"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9L12 3Z" fill="currentColor" stroke="none"/></svg><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9L12 3Z" fill="currentColor" stroke="none"/></svg><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9L12 3Z" fill="currentColor" stroke="none"/></svg><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9L12 3Z" fill="currentColor" stroke="none"/></svg><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9L12 3Z" fill="currentColor" stroke="none"/></svg></div>
    <p class="mt-1 text-sm text-neutral-500">Based on 2,417 reviews</p>
    <div class="mt-6 space-y-1.5">
      <div class="flex items-center gap-2 text-xs text-neutral-500">
        <span class="w-3">5</span>
        <span class="h-1.5 flex-1 overflow-hidden rounded-full bg-neutral-100"><span class="block h-full w-[81%] rounded-full bg-neutral-900"></span></span>
        <span class="w-8 text-right">81%</span>
      </div>
      <div class="flex items-center gap-2 text-xs text-neutral-500">
        <span class="w-3">4</span>
        <span class="h-1.5 flex-1 overflow-hidden rounded-full bg-neutral-100"><span class="block h-full w-[12%] rounded-full bg-neutral-900"></span></span>
        <span class="w-8 text-right">12%</span>
      </div>
      <div class="flex items-center gap-2 text-xs text-neutral-500">
        <span class="w-3">3</span>
        <span class="h-1.5 flex-1 overflow-hidden rounded-full bg-neutral-100"><span class="block h-full w-[4%] rounded-full bg-neutral-900"></span></span>
        <span class="w-8 text-right">4%</span>
      </div>
      <div class="flex items-center gap-2 text-xs text-neutral-500">
        <span class="w-3">2</span>
        <span class="h-1.5 flex-1 overflow-hidden rounded-full bg-neutral-100"><span class="block h-full w-[2%] rounded-full bg-neutral-900"></span></span>
        <span class="w-8 text-right">2%</span>
      </div>
      <div class="flex items-center gap-2 text-xs text-neutral-500">
        <span class="w-3">1</span>
        <span class="h-1.5 flex-1 overflow-hidden rounded-full bg-neutral-100"><span class="block h-full w-[1%] rounded-full bg-neutral-900"></span></span>
        <span class="w-8 text-right">1%</span>
      </div>
    </div>
  </div>
  <div class="divide-y divide-neutral-200 lg:col-span-2">
    <article class="pb-6">
      <div class="flex items-center gap-3">
        <span class="h-9 w-9 rounded-full bg-neutral-200"></span>
        <div>
          <p class="text-sm font-medium text-neutral-900">Harriet Cole <span class="ml-1 rounded-full bg-green-100 px-2 py-0.5 text-[10px] font-medium text-green-700">Verified</span></p>
          <p class="text-xs text-neutral-500"><span class="text-amber-400"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9L12 3Z" fill="currentColor" stroke="none"/></svg><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9L12 3Z" fill="currentColor" stroke="none"/></svg><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9L12 3Z" fill="currentColor" stroke="none"/></svg><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9L12 3Z" fill="currentColor" stroke="none"/></svg><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9L12 3Z" fill="currentColor" stroke="none"/></svg></span> · 3 days ago</p>
        </div>
      </div>
      <h4 class="mt-3 text-sm font-semibold text-neutral-900">Replaced three tools in our stack</h4>
      <p class="mt-1 text-sm text-neutral-600">Rollout took an afternoon and the import mapped every custom field correctly. The reporting is a genuine upgrade.</p>
    </article>
    <article class="py-6">
      <div class="flex items-center gap-3">
        <span class="h-9 w-9 rounded-full bg-neutral-200"></span>
        <div>
          <p class="text-sm font-medium text-neutral-900">Diego Ramos <span class="ml-1 rounded-full bg-green-100 px-2 py-0.5 text-[10px] font-medium text-green-700">Verified</span></p>
          <p class="text-xs text-neutral-500"><span class="text-amber-400"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9L12 3Z" fill="currentColor" stroke="none"/></svg><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9L12 3Z" fill="currentColor" stroke="none"/></svg><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9L12 3Z" fill="currentColor" stroke="none"/></svg><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9L12 3Z" fill="currentColor" stroke="none"/></svg></span><span class="text-neutral-300"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9L12 3Z" fill="currentColor" stroke="none"/></svg></span> · 1 week ago</p>
        </div>
      </div>
      <h4 class="mt-3 text-sm font-semibold text-neutral-900">Excellent, with one rough edge</h4>
      <p class="mt-1 text-sm text-neutral-600">Bulk editing is fantastic. The mobile app still lags behind the web version, though the team says it ships this quarter.</p>
    </article>
  </div>
</section>