What is the purpose of the group and peer variants in Tailwind CSS?

<div class="group bg-white rounded-xl p-6 shadow-md hover:shadow-2xl transition-all">
  <h3 class="text-xl font-bold text-gray-900 group-hover:text-blue-600 transition-colors">Pricing</h3>
  <p class="text-gray-600 group-hover:text-gray-900 mt-2 transition-colors">$99/mo</p>
  <div class="mt-4 opacity-0 group-hover:opacity-100 transform group-hover:translate-y-0 translate-y-2 transition-all duration-300">
    <button class="bg-blue-500 text-white px-6 py-2 rounded-xl">Choose Plan</button>
  </div>
</div>
      

<div class="flex items-center space-x-3">
  <input id="terms" type="checkbox" class="peer sr-only">
  <label for="terms" class="peer-focus:border-blue-500 peer-focus:bg-blue-50 flex items-center gap-3 p-3 border-2 
        border-gray-200 rounded-lg cursor-pointer transition-all">
    <div class="w-5 h-5 border-2 border-gray-300 rounded peer-checked:bg-blue-500 peer-checked:border-blue-500 transition-all"></div>
    Accept Terms
  </label>
</div>