Tailwind CSS Product Review Sections Blocks

All Blocks
Application UI
Feedback & States
Product Review Sections

Product Review Sections

Review layouts for compact rating summaries, filtered feedback sections, and longer customer-review reads across admin and storefront pages.

Review Summary Card with Rating Breakdown and Weekly Badge Pro

Compact review snapshot for admin surfaces, with overall scoring, distribution context, and a small performance comparison.

<div class="p-4 bg-card border border-card-line rounded-xl shadow-2xs">
  <div class="flex flex-col sm:flex-row gap-5 md:gap-10">
    <div>
      <svg class="w-20 h-auto mb-2" width="728" height="398" viewBox="0 0 728 398" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M65.4113 139.994C63.8882 135.396 69.1386 131.535 73.0734 134.36L101.888 155.043C103.647 156.307 106.02 156.293 107.765 155.01L136.341 133.997C140.243 131.128 145.538 134.928 144.067 139.543L133.3 173.339C132.642 175.403 133.388 177.656 135.148 178.919L163.963 199.603C167.897 202.427 165.919 208.637 161.075 208.664L125.606 208.867C123.44 208.88 121.529 210.286 120.871 212.35L110.104 246.145C108.633 250.76 102.116 250.798 100.593 246.2L89.4396 212.529C88.7585 210.473 86.8307 209.089 84.6646 209.102L49.1956 209.305C44.3521 209.333 42.3028 203.146 46.205 200.277L74.7806 179.264C76.5257 177.981 77.2461 175.72 76.5649 173.664L65.4113 139.994Z" class="fill-foreground" fill="currentColor"/>
        <path d="M208.372 57.4387C208.309 52.5955 214.481 50.5016 217.378 54.3831L238.596 82.8067C239.892 84.5425 242.158 85.2465 244.209 84.5506L277.798 73.1547C282.385 71.5986 286.284 76.821 283.487 80.7761L263.012 109.739C261.761 111.507 261.792 113.88 263.088 115.616L284.305 144.04C287.203 147.921 283.441 153.242 278.815 151.805L244.943 141.282C242.874 140.639 240.627 141.401 239.376 143.17L218.901 172.133C216.104 176.088 209.881 174.154 209.818 169.311L209.36 133.844C209.332 131.678 207.912 129.777 205.844 129.134L171.971 118.61C167.346 117.173 167.262 110.657 171.848 109.101L205.437 97.7048C207.489 97.0089 208.859 95.0712 208.831 92.9053L208.372 57.4387Z" class="fill-foreground" fill="currentColor"/>
        <path d="M368.522 20.3786C370.332 15.8857 376.834 16.3331 378.011 21.0316L386.629 55.4381C387.156 57.5393 388.975 59.0626 391.136 59.2113L426.522 61.6465C431.354 61.9791 432.938 68.3008 428.833 70.8721L398.774 89.7012C396.938 90.8511 396.052 93.0523 396.578 95.1535L405.197 129.56C406.374 134.258 400.851 137.718 397.137 134.609L369.941 111.839C368.28 110.449 365.912 110.286 364.077 111.436L334.017 130.265C329.913 132.836 324.916 128.652 326.725 124.16L339.976 91.2582C340.785 89.2489 340.209 86.947 338.548 85.5565L311.351 62.787C307.638 59.6777 310.072 53.6325 314.904 53.9651L350.29 56.4003C352.451 56.549 354.462 55.2893 355.272 53.28L368.522 20.3786Z" class="fill-foreground" fill="currentColor"/>
        <path d="M671.036 131.221L659.902 164.898C658.882 167.983 659.964 171.374 662.583 173.297L691.171 194.293C693.123 195.727 692.1 198.82 689.678 198.808L654.209 198.625C650.96 198.609 648.069 200.686 647.049 203.771L635.915 237.448C635.155 239.747 631.897 239.73 631.16 237.423L620.373 203.634C619.385 200.539 616.516 198.432 613.267 198.415L577.798 198.232C575.376 198.22 574.385 195.116 576.352 193.702L605.154 173.002C607.792 171.105 608.91 167.726 607.922 164.631L597.135 130.841C596.398 128.534 599.044 126.632 600.996 128.066L629.584 149.062C632.203 150.985 635.762 151.003 638.401 149.107L667.203 128.406C669.17 126.993 671.796 128.922 671.036 131.221Z" class="stroke-foreground" stroke="currentColor" stroke-width="5"/>
        <path d="M530.478 51.8783L527.379 87.2122C527.096 90.449 528.928 93.5004 531.919 94.7706L564.566 108.636C566.795 109.583 566.51 112.829 564.151 113.373L529.588 121.345C526.422 122.076 524.087 124.761 523.803 127.998L520.704 163.332C520.493 165.745 517.318 166.477 516.071 164.401L497.809 133.994C496.136 131.208 492.859 129.817 489.693 130.547L455.131 138.519C452.771 139.063 451.094 136.27 452.683 134.443L475.959 107.678C478.091 105.226 478.402 101.68 476.729 98.895L458.467 68.488C457.22 66.4118 459.358 63.953 461.587 64.8998L494.234 78.7654C497.225 80.0356 500.693 79.2356 502.826 76.7838L526.101 50.0193C527.69 48.1919 530.69 49.4657 530.478 51.8783Z" class="stroke-foreground" stroke="currentColor" stroke-width="5"/>
        <path d="M523.194 163.551L526.468 126.217C526.561 125.165 526.318 124.111 525.774 123.205L499.391 79.2776C498.848 78.3724 498.032 77.6625 497.06 77.2498L462.564 62.5991C458.106 60.7056 453.83 65.6232 456.323 69.7755L474.585 100.183C475.701 102.04 475.493 104.403 474.072 106.038L450.796 132.802C447.618 136.457 450.973 142.044 455.693 140.956L490.255 132.984C492.366 132.497 494.55 133.425 495.665 135.281L513.927 165.689C516.421 169.841 522.771 168.376 523.194 163.551Z" class="fill-foreground" fill="currentColor"/>
        <path d="M352.089 394.479L369.162 349.69" class="stroke-foreground" stroke="currentColor" stroke-width="7" stroke-linecap="round"/>
        <path d="M369.161 349.692C355.075 340.09 313.524 320.14 259.036 315.506" class="stroke-foreground" stroke="currentColor" stroke-width="7" stroke-linecap="round"/>
        <path d="M258.927 316.314C255.341 333.101 244.966 370.853 232.149 387.568" class="stroke-foreground" stroke="currentColor" stroke-width="7" stroke-linecap="round"/>
        <path d="M355.802 338.448C368.802 322.448 392.302 297.448 401.802 279.948L417.302 253.448C427.802 236.579 432.296 222.826 436.308 215.37C438.092 212.055 439.202 209.538 441.672 204.613C443.913 200.141 445.886 195.626 444.321 191.923C443.123 189.087 438.124 184.123 427.715 186.956C417.306 189.79 410.207 198.581 407.959 202.622C405.707 205.97 395.931 218.103 393.254 220.766C387.032 226.953 356.38 252.611 337.264 237.579M333.544 212.733C349.412 204.344 380.237 189.219 390.975 178.835C402.003 176.7 429.236 180.268 426.488 165.645C425.916 162.598 416.327 155.042 402.073 152.477C391.815 150.632 384.378 149.911 375.857 154.49C371.026 157.086 369.109 158.008 362.872 162.151M332.954 184.462C341.183 176.698 347.066 172.26 351.127 169.468C355.081 166.751 358.03 164.284 362.872 162.151M362.872 162.151C360.284 160.743 349.1 160.834 335.915 167.365C321.512 174.498 319.052 177.199 313.475 180.879C307.898 184.558 296.743 191.918 292.377 195.469C284.651 201.751 277.61 208.831 274.83 212.403C269.936 219.961 272.664 225.679 280.02 239.752M284.43 265.881C284.43 275.25 282.302 297.448 275.802 315.948" class="stroke-foreground" stroke="currentColor" stroke-width="7" stroke-linecap="round"/>
        <path d="M413.372 195.473L287.926 264.014C272.77 269.943 262.227 249.168 278.13 242.154L333.458 212.656M430.821 185.701L454.02 173.158L443.034 155.591L427.329 163.524" class="stroke-foreground" stroke="currentColor" stroke-width="7" stroke-linecap="round"/>
        <path d="M457.149 171.455L470.229 152.098" class="stroke-foreground" stroke="currentColor" stroke-width="7" stroke-linecap="round"/>
        <path d="M446.149 153.955L470.229 152.098" class="stroke-foreground" stroke="currentColor" stroke-width="7" stroke-linecap="round"/>
      </svg>

<p class="text-sm text-muted-foreground-1">
        — of 12 reviews
        <span class="ms-0.5 py-1 px-2 bg-surface-1 text-surface-foreground font-medium text-xs rounded-full">
          +1 this week
        </span>
      </p>
    </div>

<div class="grow">
            <div class="flex items-center gap-x-5">
              <div class="flex w-full h-2 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
                <div class="flex flex-col justify-center overflow-hidden bg-primary text-xs text-primary-foreground text-center rounded-full whitespace-nowrap" style="width: 60%"></div>
              </div>
              <span class="min-w-4 text-sm text-muted-foreground-1">6</span>
            </div>
          </div>
          
        </div>

<div class="flex items-center gap-5 md:gap-10">
          
          <div class="flex gap-x-1">
            <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
            </svg>
            <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
            </svg>
            <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
            </svg>
            <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
            </svg>
            <svg class="shrink-0 size-3.5 text-muted-foreground/40" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
            </svg>
          </div>

<div class="grow">
            <div class="flex items-center gap-x-5">
              <div class="flex w-full h-2 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
                <div class="flex flex-col justify-center overflow-hidden bg-primary text-xs text-primary-foreground text-center rounded-full whitespace-nowrap" style="width: 40%"></div>
              </div>
              <span class="min-w-4 text-sm text-muted-foreground-1">4</span>
            </div>
          </div>
          
        </div>

<div class="flex items-center gap-5 md:gap-10">
          
          <div class="flex gap-x-1">
            <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
            </svg>
            <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
            </svg>
            <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
            </svg>
            <svg class="shrink-0 size-3.5 text-muted-foreground/40" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
            </svg>
            <svg class="shrink-0 size-3.5 text-muted-foreground/40" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
            </svg>
          </div>

<div class="grow">
            <div class="flex items-center gap-x-5">
              <div class="flex w-full h-2 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                <div class="flex flex-col justify-center overflow-hidden bg-primary text-xs text-primary-foreground text-center rounded-full whitespace-nowrap" style="width: 20%"></div>
              </div>
              <span class="min-w-4 text-sm text-muted-foreground-1">2</span>
            </div>
          </div>
          
        </div>

<div class="flex items-center gap-5 md:gap-10">
          
          <div class="flex gap-x-1">
            <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
            </svg>
            <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
            </svg>
            <svg class="shrink-0 size-3.5 text-muted-foreground/40" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
            </svg>
            <svg class="shrink-0 size-3.5 text-muted-foreground/40" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
            </svg>
            <svg class="shrink-0 size-3.5 text-muted-foreground/40" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
            </svg>
          </div>

<div class="grow">
            <div class="flex items-center gap-x-5">
              <div class="flex w-full h-2 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                <div class="flex flex-col justify-center overflow-hidden bg-primary text-xs text-primary-foreground text-center rounded-full whitespace-nowrap" style="width: 0%"></div>
              </div>
              <span class="min-w-4 text-sm text-muted-foreground-1">0</span>
            </div>
          </div>
          
        </div>

<div class="flex items-center gap-5 md:gap-10">
          
          <div class="flex gap-x-1">
            <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
            </svg>
            <svg class="shrink-0 size-3.5 text-muted-foreground/40" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
            </svg>
            <svg class="shrink-0 size-3.5 text-muted-foreground/40" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
            </svg>
            <svg class="shrink-0 size-3.5 text-muted-foreground/40" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
            </svg>
            <svg class="shrink-0 size-3.5 text-muted-foreground/40" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
            </svg>
          </div>

<div class="grow">
            <div class="flex items-center gap-x-5">
              <div class="flex w-full h-2 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                <div class="flex flex-col justify-center overflow-hidden bg-primary text-xs text-primary-foreground text-center rounded-full whitespace-nowrap" style="width: 0%"></div>
              </div>
              <span class="min-w-4 text-sm text-muted-foreground-1">0</span>
            </div>
          </div>
          
        </div>
        
      </div>

<div class="mt-2 flex justify-end items-center gap-x-2">
        <span class="text-sm text-muted-foreground-1">Overall performance</span>
        <span class="py-1 px-2.5 inline-flex items-center gap-x-1.5 text-xs font-medium bg-yellow-100 text-yellow-800 rounded-full dark:bg-yellow-500/10 dark:text-yellow-500">
          Average
        </span>
      </div>
      
    </div>
  </div>
</div>

Open related ecommerce reviews page

Tabbed Review Section with Verified Purchase Note Pro

Marketplace-style review block that combines quick filtering with purchase context and stacked customer feedback.

<div id="reviews" class="flex flex-wrap justify-between items-center gap-3">
                      <div class="font-medium text-foreground">
                        <ul class="flex flex-wrap items-center gap-2">
                          <li class="inline-flex items-center relative pe-2.5 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:size-1 after:bg-surface-3 after:rounded-full after:-translate-y-1/2">
                            
                            <div class="flex flex-wrap items-center">
                              <span class="me-1">
                                4.8
                              </span>
          
                              
                              <div class="inline-flex items-center gap-x-0.5">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                  <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                </svg>
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                  <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                </svg>
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                  <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                </svg>
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                  <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                </svg>
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                  <path d="M5.354 5.119 7.538.792A.52.52 0 0 1 8 .5c.183 0 .366.097.465.292l2.184 4.327 4.898.696A.54.54 0 0 1 16 6.32a.55.55 0 0 1-.17.445l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256a.5.5 0 0 1-.146.05c-.342.06-.668-.254-.6-.642l.83-4.73L.173 6.765a.55.55 0 0 1-.172-.403.6.6 0 0 1 .085-.302.51.51 0 0 1 .37-.245zM8 12.027a.5.5 0 0 1 .232.056l3.686 1.894-.694-3.957a.56.56 0 0 1 .162-.505l2.907-2.77-4.052-.576a.53.53 0 0 1-.393-.288L8.001 2.223 8 2.226z"></path>
                                </svg>
                              </div>
                              
                            </div>
                            
                          </li>
                          <li class="inline-flex items-center relative pe-2.5 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:size-1 after:bg-surface-3 after:rounded-full after:-translate-y-1/2">
                            112 reviews
                          </li>
                        </ul>
                      </div>

<div class="inline-flex items-center gap-x-1">
                        <svg class="shrink-0 size-4 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"></path><path d="m9 12 2 2 4-4"></path></svg>
                        <p class="text-xs text-muted-foreground-1">
                          All reviews are from verified purchases
                        </p>
                      </div>
                    </div>

<div id="hs-pro-reviews-tabs-scroll" class="relative py-3 overflow-hidden" data-hs-scroll-nav>
                      
                      <nav id="hs-pro-reviews-tabs" class="hs-scroll-nav-body flex gap-1 snap-x snap-mandatory overflow-x-auto [&::-webkit-scrollbar]:hidden p-0.5 bg-layer border border-layer-line rounded-full" aria-label="Tabs" role="tablist" aria-orientation="horizontal">
                        <button type="button" class="hs-tab-active:bg-surface-active snap-start hs-tab-active:bg-muted-hover hs-tab-active:focus:bg-muted-focus hs-tab-active:focus:text-surface-foreground w-full inline-flex justify-center items-center gap-x-2 text-surface-foreground py-2 px-3 text-sm whitespace-nowrap rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:text-surface-foreground disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden active" id="hs-pro-tabs-shpm-item-five-star" aria-selected="true" data-hs-tab="#hs-pro-tabs-shpm-five-star" aria-controls="hs-pro-tabs-shpm-five-star" role="tab" >
                          5 star (100)
                        </button>
                        <button type="button" class="hs-tab-active:bg-surface-active snap-start hs-tab-active:bg-muted-hover hs-tab-active:focus:bg-muted-focus hs-tab-active:focus:text-surface-foreground w-full inline-flex justify-center items-center gap-x-2 text-surface-foreground py-2 px-3 text-sm whitespace-nowrap rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:text-surface-foreground disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden " id="hs-pro-tabs-shpm-item-four-star" aria-selected="false" data-hs-tab="#hs-pro-tabs-shpm-four-star" aria-controls="hs-pro-tabs-shpm-four-star" role="tab" >
                          4 star (10)
                        </button>
                        <button type="button" class="hs-tab-active:bg-surface-active snap-start hs-tab-active:bg-muted-hover hs-tab-active:focus:bg-muted-focus hs-tab-active:focus:text-surface-foreground w-full inline-flex justify-center items-center gap-x-2 text-surface-foreground py-2 px-3 text-sm whitespace-nowrap rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:text-surface-foreground disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden " id="hs-pro-tabs-shpm-item-three-star" aria-selected="false" data-hs-tab="#hs-pro-tabs-shpm-three-star" aria-controls="hs-pro-tabs-shpm-three-star" role="tab" >
                          3 star (2)
                        </button>
                        <button type="button" class="hs-tab-active:bg-surface-active snap-start hs-tab-active:bg-muted-hover hs-tab-active:focus:bg-muted-focus hs-tab-active:focus:text-surface-foreground w-full inline-flex justify-center items-center gap-x-2 text-surface-foreground py-2 px-3 text-sm whitespace-nowrap rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:text-surface-foreground disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden " id="hs-pro-tabs-shpm-item-two-and-below" aria-selected="false" data-hs-tab="#hs-pro-tabs-shpm-two-and-below" aria-controls="hs-pro-tabs-shpm-two-and-below" role="tab" >
                          2 and below (0)
                        </button>
                      </nav>
                      
                    </div>

<div id="hs-pro-tabs-shpm-five-star" role="tabpanel" aria-labelledby="hs-pro-tabs-shpm-item-five-star">
                      
                      <div class="grid sm:grid-cols-2 gap-4">
                        
                        <div class="p-4 h-full flex flex-col bg-card border border-card-line rounded-xl shadow-2xs">
                          <div class="flex flex-wrap justify-between gap-3">
                            <div>
                              <p class="font-semibold text-sm text-foreground">
                                Christina
                              </p>

<p class="text-[13px] text-muted-foreground-1">
                                13 hours ago
                              </p>
                            </div>
    
                            <div class="mt-1">
                              
                              <div class="flex items-center gap-x-0.5">
                                <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                              </div>
                              
                            </div>
                          </div>

<p class="mt-3 text-sm text-foreground">
                              I got my iPad back in 2017 and really wanted to love it but it has never been very useful to me. I tried attaching a Bluetooth keyboard. That made it heavy and clunky and I was never able to know how much battery life... <a class="text-primary underline-offset-4 hover:underline" href="#">Read more</a>
                            </p>
                          </div>
                        </div>

<div class="p-4 h-full flex flex-col bg-card border border-card-line rounded-xl shadow-2xs">
                          <div class="flex flex-wrap justify-between gap-3">
                            <div>
                              <p class="font-semibold text-sm text-foreground">
                                Sam
                              </p>

<p class="mt-3 text-sm text-foreground">
                              The apple pencil is very easy to pair with your i pad. Not only does it work better than expected while drawing or painting but the battery last much longer than expected. I was fully blown away with the fine tuning ability while drawing and painting.
                            </p>
                          </div>
                        </div>

</div>
                      
                    </div>

<div id="hs-pro-tabs-shpm-four-star" class="hidden" role="tabpanel" aria-labelledby="hs-pro-tabs-shpm-item-four-star">
                      
                      <div class="grid sm:grid-cols-2 gap-4">
  
                        
                        <div class="p-4 h-full flex flex-col bg-card border border-card-line rounded-xl shadow-2xs">
                          <div class="flex flex-wrap justify-between gap-3">
                            <div>
                              <p class="font-semibold text-sm text-foreground">
                                Brian
                              </p>

<p class="text-[13px] text-muted-foreground-1">
                                December 27, 2024
                              </p>
                            </div>
    
                            <div class="mt-1">
                              
                              <div class="flex items-center gap-x-0.5">
                                <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.56.56 0 0 0-.163-.505L1.71 6.745l4.052-.576a.53.53 0 0 0 .393-.288L8 2.223l1.847 3.658a.53.53 0 0 0 .393.288l4.052.575-2.906 2.77a.56.56 0 0 0-.163.506l.694 3.957-3.686-1.894a.5.5 0 0 0-.461 0z"/></svg>
                              </div>
                              
                            </div>
                          </div>

<div>

<p class="mt-3 text-sm text-foreground">
                              I bought this back in April 2024… now it will not charge. I’ve connected to both my iPad and iPhone, I’ve attempted with both adapters that are provided and even changed the tips. It will not charge.
                            </p>
                          </div>
                        </div>

<p class="text-[13px] text-muted-foreground-1">
                                December 14, 2024
                              </p>
                            </div>
    
                            <div class="mt-1">
                              
                              <div class="flex items-center gap-x-0.5">
                                <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.56.56 0 0 0-.163-.505L1.71 6.745l4.052-.576a.53.53 0 0 0 .393-.288L8 2.223l1.847 3.658a.53.53 0 0 0 .393.288l4.052.575-2.906 2.77a.56.56 0 0 0-.163.506l.694 3.957-3.686-1.894a.5.5 0 0 0-.461 0z"/></svg>
                              </div>
                              
                            </div>
                          </div>

<div>

<p class="mt-3 text-sm text-foreground">
                              Okay, it was delayed for like 3 days then it was placed on hold, after that it finally came and I actually love it. The value is actually so good, I got it for 79 dollars, it works really well and fits in my hand perfectly!
                            </p>
                          </div>
                        </div>

</div>
                      
                    </div>

<div id="hs-pro-tabs-shpm-three-star" class="hidden" role="tabpanel" aria-labelledby="hs-pro-tabs-shpm-item-three-star">
                      
                      <div class="grid sm:grid-cols-2 gap-4">
  
                        
                        <div class="p-4 h-full flex flex-col bg-card border border-card-line rounded-xl shadow-2xs">
                          <div class="flex flex-wrap justify-between gap-3">
                            <div>
                              <p class="font-semibold text-sm text-foreground">
                                Truong
                              </p>

<p class="text-[13px] text-muted-foreground-1">
                                November 26, 2024
                              </p>
                            </div>
    
                            <div class="mt-1">
                              
                              <div class="flex items-center gap-x-0.5">
                                <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.56.56 0 0 0-.163-.505L1.71 6.745l4.052-.576a.53.53 0 0 0 .393-.288L8 2.223l1.847 3.658a.53.53 0 0 0 .393.288l4.052.575-2.906 2.77a.56.56 0 0 0-.163.506l.694 3.957-3.686-1.894a.5.5 0 0 0-.461 0z"/></svg>
                                <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.56.56 0 0 0-.163-.505L1.71 6.745l4.052-.576a.53.53 0 0 0 .393-.288L8 2.223l1.847 3.658a.53.53 0 0 0 .393.288l4.052.575-2.906 2.77a.56.56 0 0 0-.163.506l.694 3.957-3.686-1.894a.5.5 0 0 0-.461 0z"/></svg>
                              </div>
                              
                            </div>
                          </div>

<div>

<p class="mt-3 text-sm text-foreground">
                              sometime it better to just get the newest model, also this pencil had a lot of problem and defect and connectivity problem
                            </p>
                          </div>
                        </div>

<p class="text-[13px] text-muted-foreground-1">
                                November 8, 2024
                              </p>
                            </div>
    
                            <div class="mt-1">
                              
                              <div class="flex items-center gap-x-0.5">
                                <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.56.56 0 0 0-.163-.505L1.71 6.745l4.052-.576a.53.53 0 0 0 .393-.288L8 2.223l1.847 3.658a.53.53 0 0 0 .393.288l4.052.575-2.906 2.77a.56.56 0 0 0-.163.506l.694 3.957-3.686-1.894a.5.5 0 0 0-.461 0z"/></svg>
                                <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.56.56 0 0 0-.163-.505L1.71 6.745l4.052-.576a.53.53 0 0 0 .393-.288L8 2.223l1.847 3.658a.53.53 0 0 0 .393.288l4.052.575-2.906 2.77a.56.56 0 0 0-.163.506l.694 3.957-3.686-1.894a.5.5 0 0 0-.461 0z"/></svg>
                              </div>
                              
                            </div>
                          </div>

<div>

<p class="mt-3 text-sm text-foreground">
                              The tip wore down really fast though. Really easy to use. It sometimes rolls off the table.
                            </p>
                          </div>
                        </div>

</div>
                      
                    </div>

<div id="hs-pro-tabs-shpm-two-and-below" class="hidden" role="tabpanel" aria-labelledby="hs-pro-tabs-shpm-item-two-and-below">
                      
                      <div class="grid sm:grid-cols-2 gap-4">
  
                        
                        <div class="p-4 h-full flex flex-col bg-card border border-card-line rounded-xl shadow-2xs">
                          <div class="flex flex-wrap justify-between gap-3">
                            <div>
                              <p class="font-semibold text-sm text-foreground">
                                Christina
                              </p>

<p class="text-[13px] text-muted-foreground-1">
                                13 hours ago
                              </p>
                            </div>
    
                            <div class="mt-1">
                              
                              <div class="flex items-center gap-x-0.5">
                                <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.56.56 0 0 0-.163-.505L1.71 6.745l4.052-.576a.53.53 0 0 0 .393-.288L8 2.223l1.847 3.658a.53.53 0 0 0 .393.288l4.052.575-2.906 2.77a.56.56 0 0 0-.163.506l.694 3.957-3.686-1.894a.5.5 0 0 0-.461 0z"/></svg>
                                <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.56.56 0 0 0-.163-.505L1.71 6.745l4.052-.576a.53.53 0 0 0 .393-.288L8 2.223l1.847 3.658a.53.53 0 0 0 .393.288l4.052.575-2.906 2.77a.56.56 0 0 0-.163.506l.694 3.957-3.686-1.894a.5.5 0 0 0-.461 0z"/></svg>
                                <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.56.56 0 0 0-.163-.505L1.71 6.745l4.052-.576a.53.53 0 0 0 .393-.288L8 2.223l1.847 3.658a.53.53 0 0 0 .393.288l4.052.575-2.906 2.77a.56.56 0 0 0-.163.506l.694 3.957-3.686-1.894a.5.5 0 0 0-.461 0z"/></svg>
                              </div>
                              
                            </div>
                          </div>

<p class="mt-3 text-sm text-foreground">
                              The apple pencil is longer and heavier than the generic version I’ve been using and the result is incredibly uncomfortable. It feels like it’s trying to actively flip over the top of my hand as I write. The weird weight and leverage puts more strain on my wrist and leads to discomfort and worse hand writing. <a class="text-primary underline-offset-4 hover:underline" href="#">Read more</a>
                            </p>
                          </div>
                        </div>

<p class="mt-3 text-sm text-foreground">
                              I used my Apple Pencil with my 10th generation iPad for the first semester of grad school. I did use it pretty heavily. Pretty early on it started to glitch and add straight lines whenever it touched the screen, but that could always be corrected by disconnecting and reconnecting. <a class="text-primary underline-offset-4 hover:underline" href="#">Read more</a>
                            </p>
                          </div>
                        </div>

</div>
                      
                    </div>

<div class="mt-6 w-full max-w-56 mx-auto">
                      <a class="py-3 px-4 w-full flex justify-center items-center font-medium text-sm text-start bg-layer border border-layer-line text-layer-foreground rounded-full hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" href="#">
                        See all reviews
                      </a>
                    </div>

Product Review Section with Sticky Rating Summary and Review List Pro

Long-form storefront review layout with a persistent summary rail beside a deeper column of customer responses.

<div class="py-10 bg-layer w-full max-w-340 px-4 sm:px-6 lg:px-8 mx-auto">
                      
                      <div class="mb-8 lg:mb-12 pb-3 border-b border-line-2">
                        <div class="flex flex-col sm:flex-wrap sm:flex-row sm:justify-between sm:items-center gap-3">
                          <h2 class="font-medium text-xl text-foreground">
                            Reviews
                          </h2>

<div class="flex flex-wrap items-center">
                            <span class="me-1 text-xs sm:text-sm text-muted-foreground-1">4 of 12 reviews</span>

<div class="relative min-h-7.5 inline-flex items-center">
                              <span class="me-1 text-xs sm:text-sm text-foreground">Sort By:</span>
        
                              
                              <div class="relative min-h-7.5 inline-flex items-center">
                                <select data-hs-select='{
                                    "placeholder": "Sort",
                                    "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                                    "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-1 ps-1.5 pe-7 inline-flex shrink-0 justify-center items-center gap-x-1.5 border border-transparent text-sm text-muted-foreground-1 rounded-lg underline-offset-4 hover:underline hover:text-muted-foreground-2 focus:outline-hidden focus:underline focus:text-muted-foreground-2 before:absolute before:inset-0 before:z-1",
                                    "dropdownClasses": "inset-e-0 mt-2 p-1 z-20 w-44 bg-select border border-select-line rounded-xl shadow-xl",
                                    "optionClasses": "flex items-center gap-x-3 py-2 px-3 text-xs sm:text-[13px] text-select-item-foreground hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus",
                                    "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>",
                                    "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg></div>"
                                  }' class="hidden">
                                  <option value="">Choose</option>
                                  <option>Relevant</option>
                                  <option>Helpful</option>
                                  <option selected>Newest</option>
                                  <option>Highest rated</option>
                                  <option>Lowest rated</option>
                                </select>
                              </div>
                              
                            </div>
                          </div>
                        </div>
                        
                      </div>

<div class="grid grid-cols-1 lg:grid-cols-3 lg:gap-10 xl:gap-20">
                        <div class="lg:col-span-1">
                          <div class="lg:sticky lg:top-20">
                            <div class="pt-8 mt-8 border-t border-line-1 first:pt-0 first:mt-0 first:border-t-0">
                              <div class="flex items-center gap-5">
                                <p class="font-semibold text-5xl text-foreground">
                                  4.7
                                </p>

<div class="mt-1 flex items-center gap-2">
                                    <p class="text-xs text-muted-foreground-1">
                                      12 reviews
                                    </p>

<span class="py-0.5 px-2 inline-flex items-center gap-x-1.5 text-xs font-medium bg-teal-100 text-foreground rounded-full dark:bg-teal-500/30">
                                      Verified by <span class="font-bold">Shop</span>
                                    </span>
                                  </div>
                                </div>
                              </div>
  
                              <p class="mt-3 text-xs text-muted-foreground-1">
                                10 out of 12 (92%) reviewers recommend this product
                              </p>
                            </div>

<div class="pt-8 mt-8 border-t border-line-1 first:pt-0 first:mt-0 first:border-t-0">
                              <h3 class="mb-3 text-sm font-medium text-foreground">
                                Rating snapshot
                              </h3>

<div class="space-y-2">
                                
                                <div class="flex items-center gap-x-5">
                                  <span class="min-w-12 text-xs text-muted-foreground-1">5 stars</span>
                                  <div class="flex w-full h-2 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
                                    <div class="flex flex-col justify-center overflow-hidden bg-primary text-xs text-primary-foreground text-center rounded-full whitespace-nowrap" style="width: 80%"></div>
                                  </div>
                                  <span class="min-w-4 text-xs text-muted-foreground-1">10</span>
                                </div>

<div class="flex items-center gap-x-5">
                                  <span class="min-w-12 text-xs text-muted-foreground-1">4 stars</span>
                                  <div class="flex w-full h-2 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                                    <div class="flex flex-col justify-center overflow-hidden bg-primary text-xs text-primary-foreground text-center rounded-full whitespace-nowrap" style="width: 10%"></div>
                                  </div>
                                  <span class="min-w-4 text-xs text-muted-foreground-1">1</span>
                                </div>

<div class="flex items-center gap-x-5">
                                  <span class="min-w-12 text-xs text-muted-foreground-1">3 stars</span>
                                  <div class="flex w-full h-2 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
                                    <div class="flex flex-col justify-center overflow-hidden bg-primary text-xs text-primary-foreground text-center rounded-full whitespace-nowrap" style="width: 10%"></div>
                                  </div>
                                  <span class="min-w-4 text-xs text-muted-foreground-1">1</span>
                                </div>

<div class="flex items-center gap-x-5">
                                  <span class="min-w-12 text-xs text-muted-foreground-1">2 stars</span>
                                  <div class="flex w-full h-2 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                                    <div class="flex flex-col justify-center overflow-hidden bg-primary text-xs text-primary-foreground text-center rounded-full whitespace-nowrap" style="width: 0%"></div>
                                  </div>
                                  <span class="min-w-4 text-xs text-muted-foreground-1">0</span>
                                </div>

<div class="flex items-center gap-x-5">
                                  <span class="min-w-12 text-xs text-muted-foreground-1">1 star</span>
                                  <div class="flex w-full h-2 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                                    <div class="flex flex-col justify-center overflow-hidden bg-primary text-xs text-primary-foreground text-center rounded-full whitespace-nowrap" style="width: 0%"></div>
                                  </div>
                                  <span class="min-w-4 text-xs text-muted-foreground-1">0</span>
                                </div>
                                
                              </div>
                              
                            </div>

<div class="pt-8 mt-8 border-t border-line-1 first:pt-0 first:mt-0 first:border-t-0">
                              
                              <h3 class="mb-3 text-sm font-medium text-foreground">
                                Filter by star rating
                              </h3>

<div class="grid grid-cols-5 gap-2">
                                
                                <label for="hs-pro-shpror1star" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                                has-checked:text-primary-checked
                                has-checked:border-primary-checked
                                has-checked:ring-1
                                has-checked:ring-primary-checked
                                has-disabled:pointer-events-none
                                has-disabled:opacity-70
                                has-disabled:text-line-2
                                has-disabled:after:absolute
                                has-disabled:after:inset-0
                                has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                  <input type="checkbox" id="hs-pro-shpror1star" class="hidden" name="hs-pro-shpror" >
                                  <span class="block">
                                    1 <svg class="shrink-0 size-4 mb-1 group-has-checked:fill-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
                                  </span>
                                </label>

<label for="hs-pro-shpror2star" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                                has-checked:text-primary-checked
                                has-checked:border-primary-checked
                                has-checked:ring-1
                                has-checked:ring-primary-checked
                                has-disabled:pointer-events-none
                                has-disabled:opacity-70
                                has-disabled:text-line-2
                                has-disabled:after:absolute
                                has-disabled:after:inset-0
                                has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                  <input type="checkbox" id="hs-pro-shpror2star" class="hidden" name="hs-pro-shpror" >
                                  <span class="block">
                                    2 <svg class="shrink-0 size-4 mb-1 group-has-checked:fill-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
                                  </span>
                                </label>

<label for="hs-pro-shpror3star" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                                has-checked:text-primary-checked
                                has-checked:border-primary-checked
                                has-checked:ring-1
                                has-checked:ring-primary-checked
                                has-disabled:pointer-events-none
                                has-disabled:opacity-70
                                has-disabled:text-line-2
                                has-disabled:after:absolute
                                has-disabled:after:inset-0
                                has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                  <input type="checkbox" id="hs-pro-shpror3star" class="hidden" name="hs-pro-shpror" >
                                  <span class="block">
                                    3 <svg class="shrink-0 size-4 mb-1 group-has-checked:fill-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
                                  </span>
                                </label>

<label for="hs-pro-shpror4star" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                                has-checked:text-primary-checked
                                has-checked:border-primary-checked
                                has-checked:ring-1
                                has-checked:ring-primary-checked
                                has-disabled:pointer-events-none
                                has-disabled:opacity-70
                                has-disabled:text-line-2
                                has-disabled:after:absolute
                                has-disabled:after:inset-0
                                has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                  <input type="checkbox" id="hs-pro-shpror4star" class="hidden" name="hs-pro-shpror" >
                                  <span class="block">
                                    4 <svg class="shrink-0 size-4 mb-1 group-has-checked:fill-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
                                  </span>
                                </label>

<label for="hs-pro-shpror5star" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                                has-checked:text-primary-checked
                                has-checked:border-primary-checked
                                has-checked:ring-1
                                has-checked:ring-primary-checked
                                has-disabled:pointer-events-none
                                has-disabled:opacity-70
                                has-disabled:text-line-2
                                has-disabled:after:absolute
                                has-disabled:after:inset-0
                                has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                  <input type="checkbox" id="hs-pro-shpror5star" class="hidden" name="hs-pro-shpror" >
                                  <span class="block">
                                    5 <svg class="shrink-0 size-4 mb-1 group-has-checked:fill-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
                                  </span>
                                </label>
                                
                              </div>
                              
                            </div>

<div class="pt-8 mt-8 border-t border-line-1 first:pt-0 first:mt-0 first:border-t-0">
                              <h3 class="mb-5 text-sm font-medium text-foreground">
                                Customer rating
                              </h3>

<div class="space-y-10">
                                <div class="space-y-2">
                                  <div class="flex items-center gap-x-2">
                                    <svg class="shrink-0 size-5 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526"/><circle cx="12" cy="8" r="6"/></svg>
      
                                    <h3 class="text-sm font-medium text-foreground">
                                      Quality
                                    </h3>
                                  </div>

<div class="relative w-full h-1 bg-surface-1 rounded-full" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                                    <div class="absolute top-1/2 w-5 h-1.5 rounded-full bg-primary -translate-y-1/2" style="left: 25%;"></div>
                                  </div>

<div class="flex justify-between items-center gap-5">
                                    <span class="text-xs text-muted-foreground-1">Runs tight</span>
                                    <span class="text-xs text-muted-foreground-1">Runs loose</span>
                                  </div>
                                </div>

<div class="relative w-full h-1 bg-surface-1 rounded-full" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">
                                    <div class="absolute top-1/2 w-5 h-1.5 rounded-full bg-primary -translate-y-1/2" style="left: 65%;"></div>
                                  </div>

<div class="flex justify-between items-center gap-5">
                                    <span class="text-xs text-muted-foreground-1">Runs small</span>
                                    <span class="text-xs text-muted-foreground-1">Runs tight</span>
                                  </div>
                                </div>

<div class="space-y-2">
                                  <div class="flex items-center gap-x-2">
                                    <svg class="shrink-0 size-5 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z"/><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"/></svg>
      
                                    <h3 class="text-sm font-medium text-foreground">
                                      Comfort
                                    </h3>
                                  </div>

<div class="relative w-full h-1 bg-surface-1 rounded-full" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
                                    <div class="absolute top-1/2 w-5 h-1.5 rounded-full bg-primary -translate-y-1/2" style="left: 75%;"></div>
                                  </div>

<div class="flex justify-between items-center gap-5">
                                    <span class="text-xs text-muted-foreground-1">Uncomfortable</span>
                                    <span class="text-xs text-muted-foreground-1">Very comfortable</span>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>

<div class="lg:col-span-2 pt-12 mt-12 lg:pt-0 lg:mt-0 lg:border-t-0 border-t border-line-2">
                          
                          <div class="pb-12 mb-12 border-b border-line-1 last:pb-0 last:mb-0 last:border-b-0">
                            
                            <div class="flex items-center gap-x-0.5">
                              <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                              <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                              <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                              <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                              <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                              <span class="ms-2 text-xs text-muted-foreground-1">
                                Highly recommended
                              </span>
                            </div>

<div class="mt-3 flex flex-wrap justify-between items-center gap-3">
                              <h3 class="font-semibold text-foreground">
                                Comfortable relaxed fit
                              </h3>

<p class="text-[13px] text-muted-foreground-1">
                                13 hours ago
                              </p>
                            </div>
  
                            <div class="mt-3 flex gap-2">
                              <img class="shrink-0 size-20 bg-surface rounded-lg" src="https://images.unsplash.com/photo-1598538423445-dec578db1bf8?q=80&w=180&h=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Review Image">
                              <img class="shrink-0 size-20 bg-surface rounded-lg" src="https://images.unsplash.com/photo-1598538472450-92865d69291b?q=80&w=180&h=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Review Image">
                            </div>

<p class="mt-3 text-sm text-foreground">
                              The most stylish and funky slippers l've ever owned! Much admired by friends and family.
                            </p>

<div class="mt-10 flex flex-wrap flex-col sm:flex-row sm:justify-between sm:items-center gap-2">
                              <div class="flex items-center gap-1">
                                <p class="font-semibold text-sm text-foreground">
                                  runMiles
                                </p>

<div class="inline-flex items-center gap-x-1">
                                  <svg class="shrink-0 size-4 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"></path><path d="m9 12 2 2 4-4"></path></svg>
                                  <p class="text-xs text-muted-foreground-1">
                                    Verified customer
                                  </p>
                                </div>
                              </div>

<div class="flex flex-wrap items-center gap-3">
                                <span class="text-[13px] text-muted-foreground-1">
                                  Helpful?
                                </span>

<button type="button" class="text-[13px] text-muted-foreground-1 underline underline-offset-4 hover:text-foreground focus:outline-hidden focus:text-foreground">
                                  Report
                                </button>
                              </div>
                              
                            </div>
                            
                          </div>

<div class="pb-12 mb-12 border-b border-line-1 last:pb-0 last:mb-0 last:border-b-0">
                            
                            <div class="flex items-center gap-x-0.5">
                              <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                              <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                              <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                              <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                              <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                              <span class="ms-2 text-xs text-muted-foreground-1">
                                Highly recommended
                              </span>
                            </div>

<div class="mt-3 flex flex-wrap justify-between items-center gap-3">
                              <h3 class="font-semibold text-foreground">
                                Top Choice Shoes!
                              </h3>

<p class="mt-3 text-sm text-foreground">
                              I've done a review but I don't mind gloating about your product. The pair I have now are my 3rd and love the comfort, design and now the new white sole.
                            </p>

<div class="inline-flex items-center gap-x-1">
                                  <svg class="shrink-0 size-4 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"></path><path d="m9 12 2 2 4-4"></path></svg>
                                  <p class="text-xs text-muted-foreground-1">
                                    Verified customer
                                  </p>
                                </div>
                              </div>

<div class="pb-12 mb-12 border-b border-line-1 last:pb-0 last:mb-0 last:border-b-0">
                            
                            <div class="flex items-center gap-x-0.5">
                              <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                              <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                              <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                              <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                              <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                            </div>

<div class="mt-3 flex flex-wrap justify-between items-center gap-3">
                              <h3 class="font-semibold text-foreground">
                                Amazing
                              </h3>

<p class="mt-3 text-sm text-foreground">
                              Very good and extremely comfortable. Often the back of the slipper tends to pull apart sooner than you would think for such an expensive product.
                            </p>

<div class="pb-12 mb-12 border-b border-line-1 last:pb-0 last:mb-0 last:border-b-0">
                            
                            <div class="flex items-center gap-x-0.5">
                              <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                              <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                              <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                              <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                              <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.56.56 0 0 0-.163-.505L1.71 6.745l4.052-.576a.53.53 0 0 0 .393-.288L8 2.223l1.847 3.658a.53.53 0 0 0 .393.288l4.052.575-2.906 2.77a.56.56 0 0 0-.163.506l.694 3.957-3.686-1.894a.5.5 0 0 0-.461 0z"/></svg>
                            </div>

<div class="mt-3 flex flex-wrap justify-between items-center gap-3">
                              <h3 class="font-semibold text-foreground">
                                Comfortable
                              </h3>

<p class="text-[13px] text-muted-foreground-1">
                                3 month ago
                              </p>
                            </div>

<p class="mt-3 text-sm text-foreground">
                              Comfortable, took a week or two to wear in.
                            </p>

</div>
                        
                      </div>

<div class="mt-10 lg:mt-20 text-center">
                        <button type="button" class="py-3 px-4 relative inline-flex justify-center items-center gap-x-1.5 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                          View all reviews
                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
                        </button>
                      </div>
                    </div>