JSFiddle - React, Tailwind, and code Playground

HTML

<header></header>

<div id="container">Hello.</div>
<br>
<br>
    <button id="up">up</button>
<br>
    <button id="down">down</button>

CSS

* {margin: 0px; padding:0px}


header {
    background-color: blue;
    display: block;
    height: 50px;
}

#container {
    padding: 10px;
    border: 10px solid;
    opacity: 0.5;
}

JavaScript

$(document).ready(function() {
    var x = 0.5;
    $("#up").click(function(){
        x += .2;
        $("#container").css({opacity: x});
     });
    $("#down").click(function(){
        x -= .2;
        $("#container").css({opacity: x});
     });
});