<div x-data="{ rating: 3, maxRating: 5, hoverRating: 0 }">
  <div class="flex items-center">
    <template x-for="star in maxRating">
      <svg class="h-6 w-6 cursor-pointer text-gray-300 hover:!text-yellow-500" :class="{ 'text-yellow-500': hoverRating >= star || rating >= star }" @mouseover="hoverRating = star" @mouseleave="hoverRating = 0" @click="rating = star" fill="currentColor" viewBox="0 0 20 20">
        <path
          d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
        />
      </svg>
    </template>
  </div>
</div>
                  

<div x-data="{ rating: 3, maxRating: 5, hoverRating: 0 }">
  <div class="flex items-center">
    <template x-for="star in maxRating">
      <svg class="h-6 w-6 text-gray-300" :class="{ 'text-yellow-500': hoverRating >= star || rating >= star }" fill="currentColor" viewBox="0 0 20 20">
        <path
          d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
        />
      </svg>
    </template>
  </div>
</div>
                  

<div x-data="{ rating: 3, maxRating: 5, hoverRating: 0 }">
  <div class="flex items-center">
    <template x-for="star in maxRating">
      <svg class="h-6 w-6 text-gray-300" :class="{ 'text-yellow-300': hoverRating >= star || rating >= star }" fill="currentColor" viewBox="0 0 20 20">
        <path
          d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
        />
      </svg>
    </template>
  </div>
</div>
                  

<div x-data="{ rating: 3, maxRating: 5, hoverRating: 0 }">
  <div class="flex items-center gap-1">
    <template x-for="star in maxRating">
      <div class="h-6 w-6 cursor-pointer text-gray-300 duration-300 hover:scale-125 hover:text-primary-300" :class="{ '!text-primary-300': hoverRating >= star || rating >= star }" @mouseover="hoverRating = star" @mouseleave="hoverRating = 0" @click="rating = star">
        <i class="las la-heart text-2xl"></i>
      </div>
    </template>
  </div>
</div>
                  

<div x-data="{ rating: 3, maxRating: 10, hoverRating: 0 }">
  <div class="flex items-center">
    <template x-for="star in maxRating">
      <svg class="h-6 w-6 cursor-pointer text-gray-300 hover:!text-yellow-500" :class="{ 'text-yellow-500': hoverRating >= star || rating >= star }" @mouseover="hoverRating = star" @mouseleave="hoverRating = 0" @click="rating = star" fill="currentColor" viewBox="0 0 20 20">
        <path
          d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
        />
      </svg>
    </template>
  </div>
</div>
                  

<div x-data="{ rating: 3, stars: [{id:1,icon:'las la-tired'},{id:2,icon:'las la-frown'},{id:3,icon:'las la-meh'},{id:4,icon:'las la-smile'},{id:5,icon:'las la-grin'}], hoverRating: 0 }">
  <div class="flex items-center gap-1">
    <template x-for="{id,icon} in stars">
      <div class="h-6 w-6 cursor-pointer text-gray-300 duration-300 hover:scale-125 hover:text-warning-300" :class="{ '!text-warning-300': hoverRating >= id || rating >= id }" @mouseover="hoverRating = id" @mouseleave="hoverRating = 0" @click="rating = id">
        <i :class="icon" class="text-2xl"></i>
      </div>
    </template>
  </div>
</div>
                  

<div x-data="{ rating: 2, stars: [{id:1,title:'Useless'},{id:2,title:'Poor'},{id:3,title:'Ok'},{id:4,title:'Good'},{id:5,title:'Excellent'}], hoverRating: 0 }" class="flex justify-between">
  <div class="flex items-center gap-1">
    <template x-for="{id,icon} in stars">
      <div class="h-6 w-6 cursor-pointer text-gray-300 duration-300 hover:scale-125 hover:text-warning-300" :class="{ '!text-warning-300': hoverRating >= id || rating >= id }" @mouseover="hoverRating = id" @mouseleave="hoverRating = 0" @click="rating = id">
        <i class="las la-star text-2xl"></i>
      </div>
    </template>
  </div>
  <p x-text="stars.find(star => star.id === hoverRating)?.title || stars.find(star => star.id === rating)?.title"></p>
</div>
                  

<div class="half-star flex justify-center">
  <fieldset class="rate">
    <input type="radio" id="rating10" name="rating" value="10" /><label for="rating10" title="5 stars"></label> <input type="radio" id="rating9" name="rating" value="9" /><label class="half" for="rating9" title="4 1/2 stars"></label>
    <input type="radio" id="rating8" name="rating" value="8" /><label for="rating8" title="4 stars"></label> <input type="radio" id="rating7" name="rating" value="7" /><label class="half" for="rating7" title="3 1/2 stars"></label>
    <input type="radio" id="rating6" name="rating" value="6" /><label for="rating6" title="3 stars"></label> <input type="radio" id="rating5" name="rating" value="5" /><label class="half" for="rating5" title="2 1/2 stars"></label>
    <input type="radio" id="rating4" name="rating" value="4" /><label for="rating4" title="2 stars"></label> <input type="radio" id="rating3" name="rating" value="3" /><label class="half" for="rating3" title="1 1/2 stars"></label>
    <input type="radio" id="rating2" name="rating" value="2" /><label for="rating2" title="1 star"></label> <input type="radio" id="rating1" name="rating" value="1" /><label class="half" for="rating1" title="1/2 star"></label>
  </fieldset>
</div>
                  

<div class="flex flex-wrap justify-center gap-4">
  <div x-data="{ rating: 3, maxRating: 5, hoverRating: 0 }">
    <div class="flex items-center">
      <template x-for="star in maxRating">
        <div class="h-6 w-6 cursor-pointer text-gray-300 hover:!text-yellow-500" :class="{ 'text-yellow-500': hoverRating >= star || rating >= star }" @mouseover="hoverRating = star" @mouseleave="hoverRating = 0" @click="rating = star">
          <i class="las la-star"></i>
        </div>
      </template>
    </div>
  </div>
  <div x-data="{ rating: 3, maxRating: 5, hoverRating: 0 }">
    <div class="flex items-center gap-0.5">
      <template x-for="star in maxRating">
        <div class="h-6 w-6 cursor-pointer text-gray-300 hover:!text-yellow-500" :class="{ 'text-yellow-500': hoverRating >= star || rating >= star }" @mouseover="hoverRating = star" @mouseleave="hoverRating = 0" @click="rating = star">
          <i class="las la-star text-xl"></i>
        </div>
      </template>
    </div>
  </div>
  <div x-data="{ rating: 3, maxRating: 5, hoverRating: 0 }">
    <div class="flex items-center gap-2">
      <template x-for="star in maxRating">
        <div class="h-6 w-6 cursor-pointer text-gray-300 hover:!text-yellow-500" :class="{ 'text-yellow-500': hoverRating >= star || rating >= star }" @mouseover="hoverRating = star" @mouseleave="hoverRating = 0" @click="rating = star">
          <i class="las la-star text-3xl"></i>
        </div>
      </template>
    </div>
  </div>
</div>