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;
}

JavaScript

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