JSFiddle - React, Tailwind, and code Playground

by Neal

HTML

<input type="checkbox" />
<div id="message1" class="message" ><span>Success<small></small></span></div><br />
<div id="message2" class="message" ><span>Removed<small></small></span></div>

CSS

#message1 span{position:relative;min-width:50px; padding:3px 8px; white-space:nowrap; font-size:11px; background:#535353; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; color:white;top:10px;}
#message1 span small{position:absolute; left:10px;top:-6px; border-bottom:6px solid #535353; border-right:6px solid transparent;}

#message2 span{position:relative;min-width:50px; padding:3px 8px; white-space:nowrap; font-size:11px; background:#6195EF; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; color:white;top:10px;}
#message2 span small{position:absolute; left:10px; top:-6px; border-bottom:6px solid #6195EF; border-right:6px solid transparent;}
.message{display:none;}

JavaScript

$('input[type=checkbox]').click(function(){
    var checkbox = this;
    if (checkbox.checked) {
        $("#message1").stop(true, true).show().fadeOut(10000);
        $("#message2").hide();
    }
    else {
        $("#message1").stop(true, true).hide();
        $("#message2").stop(true, true).show().fadeOut(10000);
    }
});