JSFiddle - React, Tailwind, and code Playground

by pkysylevych

HTML

<button class="sportsReg footballReg">American Football</button>
<button class="sportsReg baseballReg">Baseball</button>

CSS

.sportsReg {width: 287px; height: 62px; border: solid 2px #2a2a2a; background-color: #303030; color: #bbbbbb; background-repeat: no-repeat; background-position: 21px; margin-right: 13px; margin-bottom: 13px;}
.footballReg {background-image:url('img/sports-icons/middle_grey_icons/americanfootball_grey.png');}
.baseballReg {background-image:url('img/sports-icons/middle_grey_icons/baseball_grey.png');}
.highlight {color: #1ab7ea !important;}

JavaScript

$("button").click(function() {
  $("button").removeClass("highlight");
  $( this ).toggleClass( "highlight" );
 });