JSFiddle - React, Tailwind, and code Playground

HTML

<div class="max-px">max-width: 900px</div>
<div class="px">width: 900px</div>
<div class="max-em">max-width: 56.25em</div>
<div class="em">width: 56.25em</div>

<btn class="a">px</btn>
<btn class="b">%</btn>
<btn class="c">em</btn>

CSS

div {
    margin: 1em 0;
    background: #ddd;
    color: #333;
}
btn {
    background: #555;
    color: #fff;
    margin: 1em 1em 0 0 ;
    padding: .5em 1.5em;
    cursor: pointer;
}
.max-px {
    max-width: 900px;
}
.px {
    width: 900px;
}
.max-em {
    max-width: 56.25em;
}
.em {
    width: 56.25em;
}

JavaScript

$(function(){
    $(".a").click(function(){
        $("body").css({
            'font-size' : '16px'
        });
    })
    $(".b").click(function(){
        $("body").css({
            'font-size' : '100%'
        })
    })
    $(".c").click(function(){
        $("body").css({
            'font-size' : '1em'
        })
    })
    $("btn").click(function(){
        $(this).css({
            'background-color' : '#d9444a' }).siblings("btn").css('background-color', '#555');
    })
})