What is Peer class in Tailwind

Peer class adds functionality to a website in HTML. It's almost like JS where things work using a input radio. It depends on what is the value of input set to.

How to use it

First let's create a container div <div class="grid place-items-center mt-10"> </div>
Then let's create a ul which contains the div <ul class="flex space-x-2"> </ul>
Inside the ul let's create few li(s) which contains peer tag

<li class="relative">
      <input class="sr-only peer" type="radio" value="no" name="answer" id="answer_yes">
      <label class="flex p-5 bg-white border border-gray-300 rounded-lg cursor-pointer focus:outline-none hover:bg-gray-50 peer-checked:ring-red-500 peer-checked:ring-2 peer-checked:border-transparent" for="answer_yes">Yes</label>
</li> 

The peer class is applied to an input and it has a value, id which are two important and label has for tag which has to be same with and also id needs to be different for different li.

So the final code is

<div class="grid place-items-center mt-10">
  <ul class="flex space-x-2">
    <li class="relative">
      <input class="sr-only peer" type="radio" value="no" name="answer" id="answer_no">
      <label class="flex p-5 bg-white border border-gray-300 rounded-lg cursor-pointer focus:outline-none hover:bg-gray-50 peer-checked:ring-gray-500 peer-checked:ring-2 peer-checked:border-transparent" for="answer_no">Cancel</label>
    </li>
    <li class="relative">
      <input class="sr-only peer" type="radio" value="yes" name="answer" id="answer_yes">
      <label class="flex p-5 bg-white border border-gray-300 rounded-lg cursor-pointer focus:outline-none hover:bg-gray-50 peer-checked:ring-red-500 peer-checked:ring-2 peer-checked:border-transparent" for="answer_yes">Yes</label>
    </li>
  </ul>
</div>