About this snippet

Display a detailed summary of user reviews just like Amazon. This layout shows the percentage distribution of 5-star to 1-star ratings using simple progress bars and Flexbox.

Size
2.3 KB
Uses
HTML, CSS
Loads
Nothing external
Views
469

Collections

Related snippets

<div class="rating-box">
  <div class="rating-header">
    <div class="score">4.8</div>
    <div class="stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
    <p>based on 2,453 reviews</p>
  </div>
  <div class="rating-bars">
    <div class="bar-row">
      <span class="star-label">5 &#9733;</span>
      <div class="bar-container"><div class="bar-fill" style="width: 80%"></div></div>
      <span class="count">80%</span>
    </div>
    <div class="bar-row">
      <span class="star-label">4 &#9733;</span>
      <div class="bar-container"><div class="bar-fill" style="width: 12%"></div></div>
      <span class="count">12%</span>
    </div>
    <div class="bar-row">
      <span class="star-label">3 &#9733;</span>
      <div class="bar-container"><div class="bar-fill" style="width: 5%"></div></div>
      <span class="count">5%</span>
    </div>
    <div class="bar-row">
      <span class="star-label">2 &#9733;</span>
      <div class="bar-container"><div class="bar-fill" style="width: 2%"></div></div>
      <span class="count">2%</span>
    </div>
    <div class="bar-row">
      <span class="star-label">1 &#9733;</span>
      <div class="bar-container"><div class="bar-fill" style="width: 1%"></div></div>
      <span class="count">1%</span>
    </div>
  </div>
</div>
.rating-box {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: #fff;
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  max-width: 400px;
  display: flex;
  gap: 30px;
  align-items: center;
}
.rating-header {
  text-align: center;
}
.score {
  font-size: 3rem;
  font-weight: 800;
  color: #1f2937;
  line-height: 1;
}
.stars {
  color: #fbbf24;
  font-size: 1.2rem;
  margin: 5px 0;
}
.rating-header p {
  color: #6b7280;
  font-size: 0.8rem;
  margin: 0;
}
.rating-bars {
  flex: 1;
}
.bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.star-label {
  font-size: 0.85rem;
  color: #4b5563;
  white-space: nowrap;
  width: 30px;
}
.bar-container {
  flex: 1;
  height: 8px;
  background: #f3f4f6;
  border-radius: 4px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  background: #fbbf24;
  border-radius: 4px;
}
.count {
  font-size: 0.8rem;
  color: #6b7280;
  width: 30px;
  text-align: right;
}

      

          


    

    
  

  















  
Esc

  
  
↑↓ moveEnter select




  
Start from a template

  

    

    
Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

  




  
Share

  




  
Source

  




  
Keyboard shortcuts

  




  

    
Save