JSFiddle - React, Tailwind, and code Playground

by benhowdle89

HTML

<div id="popout">This is a notification y'all</div>

CSS

* {margin: 0; padding: 0; border: none;}
body {
    background: #7fbf4d;
    background: -moz-linear-gradient(top, #7fbf4d 0%, #63a62f 100%);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7fbf4d), to(#63a62f));  
font-family: Helvetica, arial, sans-serif;      
}

#popout {
 position: fixed;
top: 5%;
 left: 0;
background: rgba(0,0,0,0.6);
    width: 200px;
color: #fff;    
    padding: 10px;
    border: 1px solid #000;
    box-sizing: border-box;
    -webkit-animation: show-yourself 1s 2.5s linear 1;
    -webkit-transform: translateX(-200px); 
}
@-webkit-keyframes show-yourself {
    from { left: -200px; }
    to   { left: 0px }
}