JSFiddle - React, Tailwind, and code Playground

by qunzorez

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
 <div class="starRatingForm">
          <div class="starRating">
            <div class="starRatingInput">
              <input
                value="5"
                v-model="this.$store.state.starRate"
                type="radio"
                name="rate"
                id="rate-5" />
              <label
                for="rate-5"
                class="fa fa-star"></label>
              <input
                value="4"
                v-model="this.$store.state.starRate"
                type="radio"
                name="rate"
                id="rate-4" />
              <label
                for="rate-4"
                class="fa fa-star"></label>
              <input
                value="3"
                v-model="this.$store.state.starRate"
                type="radio"
                name="rate"
                id="rate-3" />
              <label
                for="rate-3"
                class="fa fa-star"></label>
              <input
                value="2"
                v-model="this.$store.state.starRate"
                type="radio"
                name="rate"
                id="rate-2" />
              <label
                for="rate-2"
                class="fa fa-star"></label>
              <input
                value="1"
                v-model="this.$store.state.starRate"
                type="radio"
                name="rate"
                id="rate-1" />
              <label
                for="rate-1"
                class="fa fa-star"></label>
            </div>
          </div>
          <div class="ratingWelcome">
            <p>책에 대한 리뷰를 남겨보세요!</p>
          </div>
        </div>

SCSS

.starRatingForm {
        .starRating {
          justify-content: center;
          text-align: center;
          input {
            display: none;
            &:not(:checked) ~ label:hover,
            &:not(:checked) ~ label:hover ~ label {
              color: #fd4;
            }
            &:checked ~ label {
              color: #fd4;
            }
            &#rate-5:checked ~ label {
              color: #fe7;
              text-shadow: 0 0 5px $primary;
            }
          }
          label {
            font-size: 30px;
            color: #444;
            padding: 5px;
            transition: all 0.2s ease;
            float: right;
          }
        }
        .ratingWelcome {
          text-align: center;
          font-size: 18px;
          font-weight: 700;
        }
      }