JSFiddle - React, Tailwind, and code Playground

by ysis81

HTML

<div id="PlayerVsComputer" class="checkbox">                                        
  <label><input type="checkbox" class="game">                                        
   <div class="btn-group" role="group"> 
    <button type="button" class="btn btn-inverse btn-xs">Player</button>             
    <button type="button" class="btn btn-clssic btn-xs">Computer</button>            
   </div>
  </label>
 </div>

CSS

.btn-classic {
  color: black;
  background-color: white;                                                               
  }
   
   
.btn-inverse {
  color: white;                                                                          
  background-color: black;                                                               
  }

JavaScript

// Flip buttons color when mouse is over buttons
/*     $('#PlayerVsComputer .btn').hover(toggle, toggle);  
     function toggle() {
       $.each($('#PlayerVsComputer .btn'), function(index, value) {
         $(value).toggleClass('btn-inverse btn-classic');
       }); 
       }   
 */      
      $('#PlayerVsComputer .btn').on('mouseover', function() {
      $.each($('#PlayerVsComputer .btn'), function(index, value) {
         $(value).toggleClass('btn-inverse btn-classic');
       });
      
      
      //$('#PlayerVsComputer .btn').removeClass('btn-inverse');
      //$(this).addClass('btn-inverse');
 }); 

 $('#PlayerVsComputer .btn').on('mouseleave', function() {
      $('#PlayerVsComputer .btn')[0].removeClass('btn-inverse btn-classic');
     $('#PlayerVsComputer .btn')[0].addClass('btn-inverse');
           $('#PlayerVsComputer .btn')[1].removeClass('btn-inverse btn-classic');
     $('#PlayerVsComputer .btn')[1].addClass('btn-classic');
 });