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;
        margin: 0;
        padding: 0;
      }

      .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;
      }

      .btn {
        width: 60%;
        text-align: center;
        border: none;
        cursor: pointer;
        color: #fff;
        height: 50px;
        border-radius: 2px;
        margin-bottom: 2px;
      }

    </style>

  </head>

  <body>
    <div style="position:fixed;bottom:0;width:100%;text-align:center;">
      <button type="button" class="btn success" onclick="showTips('Success message', 0)">click here!</button>
      <button type="button" class="btn error" onclick="showTips('Error message',1)">click here!</button>
    </div>
    <script type="text/javascript">
      function showTips(msg, isSuccess = 1, isAutoClose = true) {
        var ele = document.createElement("div"),
          zIndex = 30 + document.getElementsByClassName("global-msg-tips").length + 1;
       ...