JSFiddle - React, Tailwind, and code Playground

HTML

<div id="disabled"></div>
<div id="msg">
    <div id="msgtext"></div>
</div>

<button>Win</button>

CSS

#disabled{
position:fixed; 
width: 100%;
height: 100%;
background-color: rgb(255,0,255,220);
}
#msg{
    position:fixed; 
    display:none; 
    left:50%; 
    margin-left:-10em; 
    width:20em; 
    text-align:center; 
    height:auto; 
    background:#eee; 
    padding:2em 1em; 
    font-family: sans-serif;
    font-size:1em; 
    font-weight: bold; 
    border-radius:10px; 
    box-shadow:0px 5px 15px #333; 
    -webkit-box-shadow:0px 5px 15px #333;
    -moz-box-shadow:0px 5px 15px #333; 
    border:10px solid rgba(0,0,0,.5);
    background-clip: padding-box; 
    text-shadow:0px 1px 0px #FFF;
    z-index: 999999;
}

JavaScript

function showmsg(textToshow, timeToShow) {
    $("#msgtext").html(textToshow);
    $("#msg").fadeIn(1000, function() {
        $("#msgtext").fadeIn(700);
    });
}

function hidemsg() {
    $("#msg").fadeOut(700);
}

$(document).ready(function() {
    showmsg("Team grün hat gewonnen!", 5000);
});

$("#msg").click(function() {
    hidemsg();
});