JSFiddle - React, Tailwind, and code Playground

by Vince Oveson

HTML

<div id="pippo"></div>
<div id="pluto"></div>
<div id="opacity">opacity</div>
<div id="opacity2">opacity2</div>

CSS

#pippo {
    width:100px;
    height:100px;
    border: 1px solid #cccccc;
    background-color: #e3ee31
}
#pluto {
    width:100px;
    height:100px;
    border: 1px solid #cccccc;
    background-color: #316fee
}
#opacity {
    width:40px;
    height:20px;
    background-color:#f0f0f0;
    border: 1px solid #999999;
}
#opacity2 {
    width:40px;
    height:20px;
    background-color:#f0f0f0;
    border: 1px solid #999999;
}

JavaScript

function changeOpacity() {
    

    $( "#opacity" ).click(function() {
        var pippo = $('#pippo');
        var pippo_o = parseFloat(pippo.css('opacity'));
        var pluto = $('#pluto');
        var pluto_o = parseFloat(pluto.css('opacity'));
        
        $( "#pippo").css( "opacity", pippo_o + 0.1 );
        $( "#pluto").css( "opacity", pluto_o - 0.1 );
        pippo.text('Pippo Opacity: ' + pippo.css('opacity'));
        pluto.text('Pluto Opacity: ' + pluto.css('opacity'));
    });
    
    $( "#opacity2" ).click(function() {
        var pippo = $('#pippo');
        var pippo_o = parseFloat(pippo.css('opacity'));
        var pluto = $('#pluto');
        var pluto_o = parseFloat(pluto.css('opacity'));
        
        $( "#pippo").css( "opacity", pippo_o - 0.1 );
        $( "#pluto").css( "opacity", pluto_o + 0.1 );
        pippo.text('Pippo Opacity: ' + parseFloat(pippo.css('opacity')));
        pluto.text('Pluto Opacity: ' + parseFloat(pluto.css('opacity')));
    });
}
changeOpacity();