JSFiddle - React, Tailwind, and code Playground

by darkajax

HTML

<span class="toggleButtonRadio ">toggle Radio button</span>
<span class="toggleButtonRadio ">toggle Radio button</span>
<span class="toggleButtonRadio ">toggle Radio button</span>

CSS

.toggleButtonRadio, .toggleButton {
 background: #e1e1e1;
 text-decoration: none;
 text-align: center;
 font-family: Helvetica, Arial, sans-serif;
 font-size: .769em;
 font-weight: 900;
 color: #454545;
 text-transform: uppercase;
 text-decoration: none;
 padding: 3px 6px 3px 6px;
 -webkit-border-radius: 15px;
 border-radius: 15px;
 -webkit-box-shadow: 0px 0px 3px 0px rgba(64, 64, 64, .5);
 box-shadow: 0px 0px 3px 0px rgba(64, 64, 64, .5);
 margin: 3px 10px 10px 0px;
 cursor: pointer;
 float: left;
}

.toggleButtonRadio:hover, .toggleButton:hover {
 background: #d4d4d4;
 cursor: pointer;
}

.toggleButtonRadio.active, .toggleButton.active {
 background: #90bf00;
 color: #fff;
}

.toggleButtonRadio.active:hover, .toggleButton.active:hover {
 background: #7ca600;
}

JavaScript

$('.toggleButtonRadio').click(function(){
	$(this).toggleClass("active");
    $('.toggleButtonRadio').not(this).removeClass("active");
});