Interactive Rating Component using Tailwind CSS

Community feedback

• 

  mofada•340

  @mofadaPosted 3 months ago

  I think you can use radio group replace button to implement rating

  <!--rating-->
  <fieldset>
  	<legend class="sr-only">Rate our service</legend>
  
  	<label
  			class="w-10 h-10 has-[:checked]:bg-white has-[:checked]:text-blue-900 hover:bg-orange hover:text-blue-900 md:w-[50px] md:h-[50px]">
  		<input type="radio" name="rating" value="1" class="appearance-none" required/>
  		<span>1</span>
  	</label>
  
  	<label class="w-10 h-10 has-[:checked]:bg-white has-[:checked]:text-blue-900 hover:bg-orange hover:text-blue-900 md:w-[50px] md:h-[50px]">
  		<input type="radio" name="rating" value="2" class="appearance-none"/>
  		<span>2</span>
  	</label>
  
  	......
  </fieldset>
  

  0