JSFiddle - React, Tailwind, and code Playground

by naveed_ahmad

HTML

<div id="flash">
    <div id="flasher"></div>
</div>
<span>Highlight</span>

CSS

#flash{width:100px;height:30px;}
#flash p{text-align:center;font-size:12px;font-weight:bold;padding-top:7px;color:#333;}
#flash #flasher{width:100px;height:30px;}
span{margin:10px;cursor:pointer;}

JavaScript

$(document).ready(function(){
    $("span").click(function(){
        flash();
    });
});
function flash(){
   $("#flasher").css({"opacity":"0", 
                      "background": "#f00"})
        .animate({opacity:1},100)
       .animate({opacity:0},1000);
}