JSFiddle - React, Tailwind, and code Playground

by jaibuu

HTML

<div class="overlay" id="overlay" style="display:none;"></div>
 
<div class="box" id="box">
 <a class="boxclose" id="boxclose"></a>
 <h1>Important message</h1>
 <p>
  Here comes a very important message for your user.
  Turn this window off by clicking the cross.
 </p>
</div>
<a href="#" id="activator">activator</a>

CSS

.overlay{
    background: black;
    opacity: .5;
    position:fixed;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    z-index:100;
}
.box{
    position:fixed;
    top:-200px;
    left:30%;
    right:30%;
    background-color:#fff;
    color:#7F7F7F;
    padding:20px;
    border:2px solid #ccc;
    -moz-border-radius: 20px;
    -webkit-border-radius:20px;
    -khtml-border-radius:20px;
    -moz-box-shadow: 0 1px 5px #333;
    -webkit-box-shadow: 0 1px 5px #333;
    z-index:101;
}
a.boxclose{
    float:left;
    margin-top:-30px;
    margin-left:-30px;
    cursor:pointer;
    color: #fff;
    border: 2px solid white;
    border-radius: 30px;
    background: black;
    font-size: 19px;
    font-weight: bold;
    display: inline-block;
    line-height: 19px;
    width:19px;
    padding: 0;
    box-shadow: 1px 1px 2px black;
    text-align:center;
}

.boxclose:before {
    content: "Ă—";

}

.box h1{
    border-bottom: 1px dashed #7F7F7F;
    margin:-20px -20px 0px -20px;
    padding:10px;
    background-color:#FFEFEF;
    color:#EF7777;
    -moz-border-radius:20px 20px 0px 0px;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-top-right-radius: 20px;
    -khtml-border-top-left-radius: 20px;
    -khtml-border-top-right-radius: 20px;
}

JavaScript

$(function() {
    $('#activator').click(function(){
        $('#overlay').fadeIn(200,function(){
            $('#box').animate({'top':'20px'},200);
        });
        return false;
    });
    $('#boxclose').click(function(){
        $('#box').animate({'top':'-200px'},500,function(){
            $('#overlay').fadeOut('fast');
        });
    });
 
});