JSFiddle - React, Tailwind, and code Playground

by qolami

HTML

<div class="newsticker"> 
    </div>

CSS

* {
    padding: 0;
    margin: 0;
}
div.newsticker{
    border:1px solid #666666;
    width:100%;
    height:100px;
    line-height: 100px;
}

.newsticker p{
    padding-left:10px;
    padding-right:10px;
    float:left;
    position:absolute;
}

JavaScript

function transition() {

        $('.newsticker p').animate({"marginLeft":"400px","opacity":".0"}, 600).fadeOut(100);
        $('.newsticker').append("<p style='margin-left:400px;opacity:0'>Hello! This is a test</p>");
        $('.newsticker p').animate({"marginLeft":"0px","opacity":"1"}, 600);

}

setInterval(transition, 2000);