1
2<div class="rating-container">
3  <span class="rating-label">Rate this:</span>
4  <div class="rating">
5    <span class="rating-item">☆</span>
6    <span class="rating-item">☆</span>
7    <span class="rating-item">☆</span>
8    <span class="rating-item">☆</span>
9    <span class="rating-item">☆</span>
10  </div>
11  <span class="rating-value">0</span>
12</div>
13

1
2.rating-container {
3  display: inline-flex;
4  align-items: center;
5  font-size: 16px;
6}
7
8.rating-label {
9  margin-right: 10px;
10  color: #000000;
11}
12
13.rating {
14  display: inline-flex;
15  gap: 4px;
16}
17
18.rating-item {
19  font-size: 24px;
20  color: #d1d5db;
21  cursor: pointer;
22  transition: color 0.2s ease-in-out;
23}
24
25.rating-item.active {
26  color: #fbbf24;
27}
28
29.rating-item:hover {
30  color: #fbbf24;
31}
32
33.rating-value {
34  margin-left: 10px;
35  font-weight: bold;
36}
37