JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="rate">
                    <li class="item">
                        <div class="button">*</div>
                    </li>
                    <li class="item">
                        <div class="button">*</div>
                    </li>
                    <li class="item">
                        <div class="button">*</div>
                    </li>
                    <li class="item">
                        <div class="button">*</div>
                    </li>
                    <li class="item">
                        <div class="button">*</div>
                    </li>
                </ul>

CSS

li{display:inline-block; list-style-type:none;}
.button{font-size:50px;}
.button:hover{color:red; cursor:pointer;}