JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css">
<h4>Groups</h4>
<div class="well">
    <div class="btngroup">
        <a class="btn" href="#">Left</a>
        <a class="btn" href="#">Right</a>
    </div>
    <div class="btngroup">
        <a class="btn" href="#">1</a>
        <a class="btn" href="#">2</a>
        <a class="btn" href="#">3</a>
        <a class="btn" href="#">4</a>
    </div>
</div>
<h4>Radios</h4>
<p>In a radio group, only one button may be active at a time. Add the class <code>.radio</code> to the button group.</p>
<div class="well">
    <div class="radio btngroup">
        <a class="btn active" href="#">Left</a>
        <a class="btn" href="#">Middle</a>
        <a class="btn" href="#">Right</a>
    </div>
</div>
<h4>Toggles</h4>
<p>Toggles work like radios, but each button in the group can be set independently. Add <code>.toggle</code> to each button in the button group. Lone buttons can also be toggles.</p>
<div class="well">
    <div class="btngroup">
        <a class="btn toggle active" href="#">Left</a>
        <a class="btn toggle" href="#">Middle</a>
        <a class="btn toggle" href="#">Right</a>
    </div>
    
    <a class="btn toggle" href="#">Toggle</a>
</div>

CSS

.toggle.active {
  background-color: #bfbfbf;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#bfbfbf), to(#bfbfbf));
  background-image: -moz-linear-gradient(top, #bfbfbf, #bfbfbf);
  background-image: -ms-linear-gradient(top, #bfbfbf, #bfbfbf);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #bfbfbf), color-stop(100%, #bfbfbf));
  background-image: -webkit-linear-gradient(top, #bfbfbf, #bfbfbf);
  background-image: -o-linear-gradient(top, #bfbfbf, #bfbfbf);
  background-image: linear-gradient(top, #bfbfbf, #bfbfbf);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bfbfbf', endColorstr='#bfbfbf', GradientType=0);
  color: #333;
  text-decoration: none;
  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.radio .active {
  color: #ffffff;
  background-color: #0064cd;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
  background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
  background-image: -ms-linear-gradient(top, #049cdb, #0064cd);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
  background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
  background-image: -o-linear-gradient(top, #049cdb, #0064cd);
  background-image: linear-gradient(top, #049cdb, #0064cd);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #0064cd #0064cd #003f81;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btngroup {
  display: inline-block;
 ...

JavaScript

/* Radio and toggle buttons */
              
!function( $ ) {

    function activate( element, container ) {
        container.find( '.active' ).removeClass( 'active' )
        element.addClass('active')
    }

    jQuery.fn.radio = function() {
        
        return this.each( function() {
            var $this = $(this)
            $this.click( function() {
                activate( $this, $this.parent() )
            })
        })
    }
    
    jQuery.fn.toggleBtn = function() {
        return this.each( function() {
            var $this = $(this)
            $this.click( function() {
                $this.toggleClass('active')
            })
        })
    }
    
}( window.jQuery || window.ender );


$('.radio .btn').radio()
$('.toggle.btn').toggleBtn()