JSFiddle - React, Tailwind, and code Playground

by keepchen

HTML

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><meta name="renderer" content="webkit" />
<style type="text/css">
html,body {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  background-color: #000;
  width: 100%;
  min-height: 200px;
  color: #fff;
 }

 .global-msg-tips {
   position: fixed;
   z-index: 30;
   width: 100%;
   height: 44px;
   text-align: center;
   color: #fff;
   line-height: 44px;
   font-size: 14px;
   top: -44px;
   border: none;
   animation: tips_animate 3s ease-in-out;
}

@keyframes tips_animate {
  0% {
    transform: translateY(0px);
   }

50% {
     transform: translateY(176px);
   }

100% {
     transform: translateY(176px);
   }
 }

 .error {
   background-color: #e91e63;
 }

 .success {
   background-color: #009688;
 }
</style>

</head><body>
<button type="button" style="width:60%;text-align:center;background-color:#00ff00;border:none;cursor:pointer;color:#fff;" onclick="showTips('Success message', 0)">click here!(error message)</button>
<button type="button" style="width:60%;text-align:center;background-color:#ff0000;border:none;cursor:pointer;color:#fff;" onclick="showTips('Error message')">click here!(success message)</button>
<script type="text/javascript">
function showTips(msg,isSuccess=1,isAutoClose=true){
console.log("ok");
  var ele=document.createElement("div"),
      zIndex=30+document.getElementsByClassName("global-msg-tips").length+1;
      ele.textContent=msg;
      ele.style.display="block";
      ele.style.zIndex=zIndex;
      ele.className="global-msg-tips "+(isSuccess==0?"success":"error");
      ele.fadeOut=function(){var e=this;setTimeout(function(){e.remove();},3000)}
}
</script>
</body>
</html>