JSFiddle - React, Tailwind, and code Playground
HTML
<a class="click" href="#/">click</a>
<div class="stuff"></div>
CSS
div.click {
background:yellow;
display:inline;
}
div.lol {
padding:5px;
border:1px solid green;
margin:5px 0;
animation: fadein 2s;
-moz-animation: fadein 2s;
/* Firefox */
-webkit-animation: fadein 2s;
/* Safari and Chrome */
-o-animation: fadein 2s;
/* Opera */
}
@keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
@-moz-keyframes fadein {
/* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
@-webkit-keyframes fadein {
/* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
@-o-keyframes fadein {
/* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
JavaScript
$("a.click").click(function (e) {
$("div.stuff").append("<div class='lol'>text text text text text</div>");
});