JSFiddle - React, Tailwind, and code Playground

by kingliam

HTML

<a href="#" id="add">Add New Notice</a>

<div id="container">
</div>

CSS

#container {
}
.notice {
    width: 100%;
    height: 50px;
    background-color: #ccc;
    overflow:hidden;
}

JavaScript

var test = 0;

$('#add').click(function(e) {
    e.preventDefault();
    $('#container').append(`<p class="notice">Notice #${ test++ }</p>`);
});

$('body').on('click','p.notice', function(e) {
    $(this).animate({'height':0,'margin':'0'});
    $(this).fadeOut();
});