JSFiddle - React, Tailwind, and code Playground

HTML

<div id="switcher" class="switcher">
     <h3>Style Switcher</h3>

    <button id="switcher-default">Default</button>
    <button id="switcher-narrow">Narrow Column</button>
    <button id="switcher-large">Large Print</button>
</div>

JavaScript

$(document).ready(function () {
    $('#switcher-default').addClass('selected').on('click', function () {
        alert("Default Add Class Selected");
        $('body').removeClass('narrow').removeClass('large');
    });

    $('#switcher-narrow').on('click', function () {
        alert("Narrow click event");
        $('body').addClass('narrow').removeClass('large');
    });


    $('#switcher-large').on('click', function () {
        alert("Large click event");
        $('body').removeClass('narrow').addClass('large');
    });

    $('#switcher button').on('click', function () {
        alert("Switcher button click event");
        $('#switcher button').removeClass('selected');
        $(this).addClass('selected');
    })

});