JSFiddle - React, Tailwind, and code Playground

by cyril rameau

HTML

<div id="info">
 <span>X</span>
 <h3>Quelque chose vient de se passer !</h3>
 <p>Ceci est juste un message de notification d'information.</p>
</div>

CSS

#info
{
    width: 200px;
    background-color: grey;
    padding: 10px;
	background-size: 40px 40px;
    background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
                        transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
                        transparent 75%, transparent);                                      
     box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
     width: 50%;
     border: 1px solid;
     color: #fff;
     padding: 15px;
     position: fixed;
     _position: absolute;
     text-shadow: 0 1px 0 rgba(0,0,0,.5);
     animation: animate-bg 5s linear infinite;
	 background-color: #4ea5cd;
     border-color: #3b8eb5;
}

span
{
    float: right;
    cursor: pointer;
}

JavaScript

//Afficher
$('#info').fadeIn("slow");

//Masquer
$('span').click(function(){
    $('#info').fadeOut("slow");
});