• HTML
• CSS
• JS

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">

<div class="rating-box">
    <header>How was your experience?</header>
    <div class="stars">
        <i class="fa-solid fa-star"></i>
        <i class="fa-solid fa-star"></i>
        <i class="fa-solid fa-star"></i>
        <i class="fa-solid fa-star"></i>
        <i class="fa-solid fa-star"></i>
    </div>
</div>

CSS

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Poppins",sans-serif;
}
body{
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(45deg,#ffd195,#ffb283);
}
.rating-box{
    position:relative;
    background:#fff;
    padding:25px 50px 35px;
    border-radius:25px;
    box-shadow:0 5px 10px rgba(0,0,0,0.05);
}
.rating-box header{
    font-size:22px;
    color:#dadada;
    font-weight:500;
    margin-bottom:20px;
    text-align:center;
}
.rating-box .stars{
    display:flex;
    align-items:center;
    gap:25px;
}
.stars i{
    color:#e6e6e6;
    font-size:35px;
    cursor:pointer;
    transition:color 0.2s ease;
}
.stars i.active{
    color:#ff9c1a;
}

JS

const stars = document.querySelectorAll(".stars i");

stars.forEach((star,index1) => {
    star.addEventListener("click", ()=>{
        stars.forEach((star,index2) => {
            index1 >= index2 ? star.classList.add("active") : star.classList.remove("active");
        })
    });
});