JSFiddle - React, Tailwind, and code Playground

by Jed Mao

HTML

<section class="vn-widget-reviews">
    <section class="customer-reviews">
        <header>
             <h1>Customer Reviews</h1>

        </header>
        <section>
            <div class="stars">
                <img src="http://placehold.it/16x16" alt="" />
                <img src="http://placehold.it/16x16" alt="" />
                <img src="http://placehold.it/16x16" alt="" />
                <img src="http://placehold.it/16x16" alt="" />
                <img src="http://placehold.it/16x16" alt="" /> <span class="total">2,489</span>

                <div class="average"> <span class="average-amount">3.6</span> out of 5 stars</div>
            </div>
            <div class="bars">
                <div class="bar"> <span class="n-star">5 star</span>

                    <div class="bar-outline">
                        <div class="bar-fill" style="width:50%"></div>
                    </div> <span class="n-amount">1098</span>

                </div>
                <div class="bar"> <span class="n-star">4 star</span>

                    <div class="bar-outline">
                        <div class="bar-fill" style="width:20%"></div>
                    </div> <span class="n-amount">396</span>

                </div>
                <div class="bar"> <span class="n-star">3 star</span>

                    <div class="bar-outline">
                        <div class="bar-fill" style="width:10%"></div>
                    </div> <span class="n-amount">270</span>

                </div>
                <div class="bar"> <span class="n-star">2 star</span>

                    <div class="bar-outline">
                        <div class="bar-fill" style="width:10%"></div>
                    </div> <span class="n-amount">258</span>

                </div>
                <div class="bar"> <span class="n-star">1 star</span>

                    <div class="bar-outline">
                        <div class="bar-fill" style="width:30%"></div>
                   ...

SCSS

.vn-widget-reviews {
    font-family: Arial;
    
    section {
        display: inline-block;
        vertical-align: top;
        padding: 20px;
        box-sizing: border-box;
    }
    
    .total {
        &:before {
            content: "(";
        }
        &:after {
            content: ")";
        }
        margin-left: 10px;
    }
    
    .average {
        font-size: smaller;
        margin-bottom: 10px;
    }
    
    .n-star, .bar-outline, .n-amount {
        display: inline-block;
    }
    
    .bar {
        margin: 2px 0;
    }
    
    .n-star {
        width: 60px;
    }
    
    .bar-outline {
        outline: 2px solid black;
        height: 15px;
        width: 100px;
        margin-right: 10px;
    }
    
    .bar-fill {
        background-color: silver;
        height: 100%;
    }
    
    .see-all {
        display: block;
        margin-top: 10px;
        font-size: smaller;
    }
    
    .bubbles {
        margin-top: 50px;
    }
    
    .bubble {
        
        display: inline-block;
        vertical-align: top;
        
        p {
            width: 150px;
            border: 2px solid black;
            border-radius: 10px;
            font-size: 10px;
            padding: 15px 5px;
            margin-bottom: 2px;
        }
        
        &:nth-child(2) {
            margin: 15px 10px 0;
        }
    }
    
    .bubble-name {
        margin-left: 20px;
        font-size: smaller;
    }
    
    .ad {
        width: 150px;
        margin-top: 50px;
    }
    
    .ad-label {
        display: block;
        text-align: right;
        font-size: smaller;
    }
    
    .most-helpful {
        
        width: 50%;
        
        article {
            margin-top: 50px;
        }
                
        .helpful {
            display: block;
        }
        
        .stars, h2 {
            display: inline-block;
        }
        
        .reviewer-name:before {
            content: "By ";
        }
            
       ...