JSFiddle - React, Tailwind, and code Playground

by wisegorilla

HTML

<body>
  <div id="content">
  After 2 seconds, move your mouse cursor above this page.
   
    </div>
  <div id="news-signup">
    <div class="wrapper">
      <div id="news-signup_close"></div>
      <div class="newsletter-content" id="phplistsubscriberesult">
        <h2>Social media, Hacks & Security news. Delivered weekly.</h2>

        <p>Join thousands of readers who get our content first.</p>
        <form class="signup-form" id="signup-form" action="https://ashwinco.hosted.phplist.com/lists/?p=subscribe&id=1">
          <p>
            <input type="text" name="email" id="news_signup_email" value="" autofocus>
          </p>
          <p class="button">
            <input type="submit" value="Subscribe">
          </p>
        </form>
        <p class="footnote">Give it a try. It only takes a click to unsubscribe.</p>
      </div>
    </div>
  </div>
 
</body>

CSS

* {
              -webkit-box-sizing: border-box;
              -moz-box-sizing: border-box;
              box-sizing: border-box
          }

html{
  width:100%;
    height:100%;
}
   body{
       margin:0;
       margin-top:20px;
       font: 100 16px/1em 'Roboto Slab', serif;
       color:#fff;background: #F1F2B5; 
       background: -webkit-linear-gradient(to left, #F1F2B5 , #135058); 
       background: linear-gradient(to left, #F1F2B5 , #135058); 
      }
#content {
    position: relative;
    padding: 0;
    top: 50%;
    transform: translateY(100%);
    text-align: center;
    max-width: none;
}
          input, button {
              -webkit-appearance: none;
              border-radius: 0;
              outline: none;
              resize: none;
               font-family: 'Roboto Slab', serif;
              -webkit-font-smoothing: antialiased
          }

          p.button input{
              display: inline-block;
              background: #FFD800;
              border: 0;
              color: #000;
              line-height: 1em;
              font-weight: 400;
              text-transform: uppercase;
              cursor: pointer;
              -moz-transition: background 0.3s;
              -o-transition: background 0.3s;
              -webkit-transition: background 0.3s;
              transition: background 0.3s
          }
          p.button input:hover {
              background: #FF9000
          }
          form {
              display: inline-block;
              margin-bottom: 31px
          }

          form input {
              font: 300 18px/1em 'Roboto Slab', serif;
              color: #000000
          }

          form input[type=text] {
              background: #fff;
              line-height: 1em;
              border: 1px solid #d4d7da;
              height: 50px
          }

          #news-signup{
              position: fixed;
              width: 100%;
              visibility: hidden;
              z-index: 10002;
        ...

JavaScript

window.bioEp = {
  // Private variables
  bgEl: {},
  popupEl: {},
  closeBtnEl: {},
  shown: false,
  overflowDefault: "visible",

  // Popup options
  html: "",
  css: "",
  fonts: [],
  delay: 2,
  showOnDelay: false,
  cookieExp: 30,

  // Object for handling cookies, taken from QuirksMode
  // https://www.quirksmode.org/js/cookies.html
  cookieManager: {
    // Create a cookie
    create: function(name, value, days) {
      var expires = "";

      if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toGMTString();
      }

      document.cookie = name + "=" + value + expires + "; path=/";
    },

    // Get the value of a cookie
    get: function(name) {
      var nameEQ = name + "=";
      var ca = document.cookie.split(";");

      for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == " ") c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
      }

      return null;
    },

    // Delete a cookie
    erase: function(name) {
      this.create(name, "", -1);
    }
  },

  // Handle the bioep_shown cookie
  // If present and true, return true
  // If not present or false, create and return false
  checkCookie: function() {
    // Handle cookie reset
    if (this.cookieExp <= 0) {
      this.cookieManager.erase("bioep_shown");
      return false;
    }

    // If cookie is set to true
    if (this.cookieManager.get("bioep_shown") == "true")
      return true;

    // Otherwise, create the cookie and return false
    this.cookieManager.create("bioep_shown", "true", this.cookieExp);

    return false;
  },

  // Add font stylesheets and CSS for the popup
  addCSS: function() {
    // Add font stylesheets
    for (var i = 0; i < this.fonts.length; i++) {
      var font = document.createElement("link");
      font.href = this.fonts[i];
      font.type = "text/css";
     ...