JSFiddle - React, Tailwind, and code Playground

by thewolff

HTML

<div id="overall">
        <input type="button" class="toolbar" value="Toolbar &ouml;ffnen"/>
        <input type="button" class="help" value="Hilfsoption"/>
    </div>
    <div id="alertbox">
        Heay
    </div>

CSS

html, #overall, body {
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 position: absolute;
 /*background-color: rgba(0, 0, 0, 0.8);*/
 }

.toolbar{
cursor: pointer;
background-color:#f0c911;
border:1px solid #e65f44;
display:inline-block;
color:#c92200;
font-family:Arial;
font-size:24px;
font-weight:bold;
font-style:italic;
height:78px;
line-height:78px;
width:200px;
text-decoration:none;
text-align:center;
position: auto;
} 

.help {
cursor: pointer;
background-color:#f0c911;
border:1px solid #e65f44;
display:inline-block;
color:#c92200;
font-family:Arial;
font-size:24px;
font-weight:bold;
font-style:italic;
height:78px;
line-height:78px;
width:200px;
text-decoration:none;
text-align:center;
position: absolute;
left: 200px;
 } 

.toolbar:hover, .help:hover {
background-color:#f2ab1e;
}

.toolbar:active, .help:active {
position:relative;
top:1px;
}

#alertbox{
position: fixed;
border:solid black;
background-color: rbga(0, 0, 0, 0.8);
margin: 15% 25% 0 25%;
width: 50%; 
height: 50%;
}

JavaScript

var blacktransparent = 'rgba(255,255,255,.3)';

           $(document).ready(function() {
                $('.toolbar').click(function(){
                     $('#overall').css({'background-color': blacktransparent}); 
                 });
            });