JSFiddle - React, Tailwind, and code Playground

HTML

<button type="button" id='gridLarge' class="btn gridLarge">largegrid</button>
<button type="button" id='grid' class="btn grid active">smallgrid</button>
<button type="button" id='list' class="btn list">list</button>
<div class="item"></div>

CSS

.item {
    height:240px;
    border:1px solid orange;
}
.item.list {
    width:600px;
    height:500px;
    border:1px solid red;
}
.item.grid {
    width:400px;
    height:500px;
    border:1px solid red;
}
.item.gridlarge {
    width:500px;
    height:500px;
    border:1px solid red;
}
button {
    cursor:pointer;
    border:1px solid green;
    padding:20px;
    color:red;
    margin-bottom:20px;
}
.btn.active {
    color:green;
    background-color:red;
}

JavaScript

$('.btn').click(function(){
    $('.btn').removeClass('active');
    $(this).addClass('active');
    $('.btn').removeClass().addClass('active');
});