JSFiddle - React, Tailwind, and code Playground

by David Marshall

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="row" >
     <div class="col-lg-12">
         <div class="btn-group btn-group-justified" role="group" aria-label="...">
             <div class="btn-group" role="group" aria-label="label" data-toggle="buttons">
                 <button type="button" class=" btn btn-default btn-sm">All</button>
             </div>
             <div class="btn-group" role="group" aria-label="label">
                 <button type="button" class="btn btn-default btn-sm" id="audio" >Audiobooks</button>
             </div>
             <div class="btn-group" role="group" aria-label="label">
                 <button type="button" class="btn btn-default btn-sm">E-books</button>
             </div>
             <div class="btn-group" role="group" aria-label="label">
                 <button type="button" class="btn btn-default btn-sm">New</button>
             </div>
             <div class="btn-group" role="group" aria-label="label">
                 <button type="button" class="btn btn-default btn-sm">Premiers</button>
             </div>
             <div class="btn-group" role="group" aria-label="label">
                 <button type="button" class="btn btn-default btn-sm">Super deals</button>
             </div>
         </div>
     </div>
 </div>

JavaScript

$( document ).ready(function() {
    $(".btn").first().toggleClass("active");
    $(".btn").click(function(){
        $('.btn').removeClass('active');
        $(this).toggleClass('active');
    });
});