JSFiddle - React, Tailwind, and code Playground

by Marc Malignan

HTML

<div class="msg">
    <div class="msg-content closed">Hello, world.</div>
</div>

CSS

@-webkit-keyframes show {
    0% { 
        top: 0;
        width: 0;
        height: 0;
        margin: 0 0 0 -4px;
    }
    50% {
        top: 50%;
        width: 0;
        height: 60px;
        margin: -30px 0 0 -4px;
    }
    100% {
        width: 300px;
        margin: -30px 0 0 -154px;
    }
}

html, body {
    height: 100%;
    margin: 0;
    background: black;
    overflow: hidden;
}

.msg {
    position: absolute;
    top:50%; left:50%;
    margin: -30px 0 0 -154px;
    width: 300px;
    height: 60px;
    line-height: 60px;
    border: 4px solid limegreen;
    border-top: 0;
    border-bottom: 0;
    cursor: pointer;
    transition: all .5s;
    overflow: hidden;
    
}

.msg.closed {
    -webkit-animation: show 1s ease-in-out;
}

.msg-content {
    position: absolute;
    top:0; bottom:0; left:50%;
    width: 400px;
    margin-left: -200px;
    color: limegreen;
    text-align: center;
    font-family: consolas;
    font-size: 16px;
    font-weight: bold;
}

JavaScript

$('.msg').click(function() {
    
    var el = $(this)[0];
    var msg = $(this);
    
    msg.removeClass('closed');
    el.offsetWidth = el.offsetWidth;
    msg.addClass('closed');
});