JSFiddle - React, Tailwind, and code Playground

by newblt123

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

CSS

p.message {
    display: none;
    height: 3em;
    padding: 1em;
    font-size: 1em;
    line-height: 1em;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color: green;
    font-weight: bold;
}

JavaScript

$(function(){
    var container = $("<div>").addClass("container");
    var p = $("<p>").addClass("bg-success message").text("Success!!!");
    container.append(p);
    
    $("body").append(container);
    p.fadeIn("slow", function(){
        setTimeout(function(){
            $(p).fadeOut("slow", function(){});
        }, 1000);
    });
});