JSFiddle - React, Tailwind, and code Playground

by japaneselanguagefriend

HTML

<div class="notifications">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

CSS

.notifications {border: 1px solid #ccc; background: #f5f5f5; width: 200px; position: absolute; left: 0;}

JavaScript

$(document).ready(function(){
    $(".notifications").css("top", -$(".notifications").height());
    setTimeout(function(){
        $(".notifications").animate({top: 0}, 1000);
    }, 1000);
});