Full star rating

Half star rating

                     
 <h1>Full star rating</h1>
<div class="full-star-rating mt-4 mb-16 gap-3">
  <input
    class="full-rating-input"
    id="star-5"
    type="radio"
    name="star"
    value="star-5"
  />
  <label class="full-rating-label text-3xl" for="star-5" title="5 stars">
    <i class="fa fa-star" aria-hidden="true"></i>
  </label>

  <input
    class="full-rating-input"
    id="star-4"
    type="radio"
    name="star"
    value="star-4"
  />
  <label class="full-rating-label text-3xl" for="star-4" title="4 stars">
    <i class="fa fa-star" aria-hidden="true"></i>
  </label>

  <input
    class="full-rating-input"
    id="star-3"
    type="radio"
    name="star"
    value="star-3"
  />
  <label class="full-rating-label text-3xl" for="star-3" title="3 stars">
    <i class="fa fa-star" aria-hidden="true"></i>
  </label>

  <input
    class="full-rating-input"
    id="star-2"
    type="radio"
    name="star"
    value="star-2"
  />
  <label class="full-rating-label text-3xl" for="star-2" title="2 stars">
    <i class="fa fa-star" aria-hidden="true"></i>
  </label>

  <input
    class="full-rating-input"
    id="star-1"
    type="radio"
    name="star"
    value="star-1"
  />
  <label class="full-rating-label text-3xl" for="star-1" title="1 star">
    <i class="fa fa-star" aria-hidden="true"></i>
  </label>
</div>


<h1>Half star rating</h1>
<div class="half-star-rating mt-4 mb-10 gap-3">
  <input
    class="half-rating-input"
    type="radio"
    id="star-5"
    name="star"
    value="5"
  />
  <label
    class="full half-rating-label text-3xl"
    for="star-5"
    title="5 stars"
  ></label>

  <input
    class="half-rating-input"
    type="radio"
    id="star-4half"
    name="star"
    value="4.5"
  />
  <label
    class="half half-rating-label text-3xl"
    for="star-4half"
    title="4.5 stars"
  ></label>

  <input
    class="half-rating-input"
    type="radio"
    id="star-4"
    name="star"
    value="4"
  />
  <label
    class="full half-rating-label text-3xl"
    for="star-4"
    title="4 stars"
  ></label>

  <input
    class="half-rating-input"
    type="radio"
    id="star-3half"
    name="star"
    value="3.5"
  />
  <label
    class="half half-rating-label text-3xl"
    for="star-3half"
    title="3.5 stars"
  ></label>

  <input
    class="half-rating-input"
    type="radio"
    id="star-3"
    name="star"
    value="3"
  />
  <label
    class="full half-rating-label text-3xl"
    for="star-3"
    title="3 stars"
  ></label>

  <input
    class="half-rating-input"
    type="radio"
    id="star-2half"
    name="star"
    value="2.5"
  />
  <label
    class="half half-rating-label text-3xl"
    for="star-2half"
    title="2.5 stars"
  ></label>

  <input
    class="half-rating-input"
    type="radio"
    id="star-2"
    name="star"
    value="2"
  />
  <label
    class="full half-rating-label text-3xl"
    for="star-2"
    title="2 stars"
  ></label>

  <input
    class="half-rating-input"
    type="radio"
    id="star-1half"
    name="star"
    value="1.5"
  />
  <label
    class="half half-rating-label text-3xl"
    for="star-1half"
    title="1.5 stars"
  ></label>

  <input
    class="half-rating-input"
    type="radio"
    id="star-1"
    name="star"
    value="1"
  />
  <label
    class="full half-rating-label text-3xl"
    for="star-1"
    title="1 stars"
  ></label>

  <input
    class="half-rating-input"
    type="radio"
    id="star-half"
    name="star"
    value="0.5"
  />
  <label
    class="half half-rating-label text-3xl"
    for="star-half"
    title="0.5 stars"
  ></label>
</div>