JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
</head>
    <meta charset="utf-8" />
</head>

<body>
<div id="reviews" class="clearfix">
    <div class="ratingsummary clearfix">
        <div class="right">
            <h3>Summary</h3>
            <ul>
                <li>
                    <ul id="ratx">
                        <li>Location</li>
                        <li class="bar"><span></span></li>
                        <li class="value">4</li>
                    </ul>
                </li>
                <li>
                    <ul id="ratx">
                        <li>Hotel Services</li>
                        <li class="bar"><span></span></li>
                        <li class="value">5</li>
                    </ul>
                </li>
                <li>
                    <ul id="ratx">
                        <li>Hotel Facilities</li>
                        <li class="bar"><span></span></li>
                        <li class="value">3</li>
                    </ul>
                </li>
                <li>
                    <ul id="ratx">
                        <li>Room Cleanliness</li>
                        <li class="bar"><span></span></li>
                        <li class="value">4</li>
                    </ul>
                </li>
                <li>
                    <ul id="ratx">
                        <li>Value for Money</li>
                        <li class="bar"><span></span></li>
                        <li class="value">1</li>
                    </ul>
                </li>
            </ul>
        </div>
    </div><!-- /.ratingssummary -->
    </div>
</body>
</html>

CSS

#reviews .ratingsummary {
        color: #404040;
        font-family: Arial, sans-serif;
        height: 126px;
        margin: 0;
        padding: 14px 0 0;
        text-shadow: 0 1px 1px #fff;
        width: 620px;
    }

        #reviews .ratingsummary h4 {
            font-size: 60px;
            font-weight: normal;
            line-height: 1em;
        }
    
        #reviews .ratingsummary .right {
            padding: 0 0 0 20px;
            width: 410px;
        }
        
            #reviews .ratingsummary .right ul {
                margin-top: 5px;
            }
                
                #reviews .ratingsummary .right ul li {
                    display: block;
                }
                    
                    #reviews .ratingsummary .right ul li ul {
                        height: 14px;
                    }
        
                        #reviews .ratingsummary .right ul li ul li {
                            display: block;
                            float: left;
                            font-size: 10px;
                            font-weight: bold;
                            margin-right: 10px;
                            text-transform: uppercase;
                            width: 108px;
                        }
                        
                        #reviews .ratingsummary .right ul li ul li.bar {
                            border: 1px solid #ccc;
                            border-radius: 10px;
                            height: 11px;
                            margin-top: 1px;
                            width: 200px;
                        }
                        
                            #reviews .ratingsummary .right ul li ul li.bar span {
                                background: yellow;
                                display: block;
                                height: 11px;
    display: inline-block;
    width: 50px;
                            } 
                        
            ...

JavaScript

$(function() {
/* Ratings Summary Computation */
$("ul#ratx").each(function(index) {
    var val = $(this).children(".value").text();
    var barVal = val * 40;

    
    /* compute ratings */ 
    //alert($(this).find("li.bar").children("span").html());
    $(this).find("li.bar").children("span").css("width", barVal );
    });

});