JSFiddle - React, Tailwind, and code Playground

by Admiral Potato

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<header>
    <div class="container">
        <div class="row">
            <h1>Cookie Repair Demo</h1>
        </div>
    </div>
</header>
<section>
    <div class="container">
        <div class="row">
            <div class="col-sm-offset-2 col-sm-8">
                <h2>Set Cookies</h2>
                <form id="cookieManager">
                    <div class="form-group">
                        <label for="cookieName">Cookie Name</label>
                        <input type="text" id="cookieName" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label for="cookieName">Cookie Value</label>
                        <input type="text" id="cookieValue" class="form-control" />
                    </div>
                </form>
                  <button id="addCookie" class="btn btn-default">Add Cookie</button>
                  <button id="cleanCookies" class="btn btn-default">Clean Cookies</button>
                  <button id="destroyCookies" class="btn btn-default">Destroy All The Cookies</button>
            </div>
        </div>    
    </div>
</section>
<section>
    <div class="container">
        <div class="row">
            <div class="col-sm-offset-2 col-sm-8">
                <h2>Cookie Display</h2>
                <div id="cookieDisplay">
                    <dl class="dl-horizontal">
                        <dt>"sally"</dt>
                        <dd>"bob"</dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>
</section>

SCSS

header{
    background-color: #000;
    background-image: url('https://lh4.googleusercontent.com/-273DKWf6UGw/VBfPbGckv1I/AAAAAAAAHr8/Rgym_wLxkRM/s480-no/reflect_halos_frame_1_1920.png');
    background-position: center center;
    color: #fff;
    h1{
        text-align: center;
        font-weight: bold;
        line-height: 3em;
    }
}
section{
    box-shadow: inset 0 0.5em 0.5em rgba(0,0,0,0.1);
    padding: 2em 0;
}

JavaScript

//reference: https://developer.mozilla.org/en-US/docs/Web/API/document/cookie
//###########################################################################
var mozCookieManager = {
  getItem: function (sKey) {
    if (!sKey) { return null; }
    return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
  },
  getRawItem: function (sKey) {
    if (!sKey) { return null; }
    return document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + sKey.replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1") || null;
  },
  setItem: function (sKey, sValue, vEnd, sPath, sDomain, bSecure) {
    if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { return false; }
    var sExpires = "";
    if (vEnd) {
      switch (vEnd.constructor) {
        case Number:
          sExpires = vEnd === Infinity ? "; expires=Fri, 31 Dec 9999 23:59:59 GMT" : "; max-age=" + vEnd;
          break;
        case String:
          sExpires = "; expires=" + vEnd;
          break;
        case Date:
          sExpires = "; expires=" + vEnd.toUTCString();
          break;
      }
    }
    document.cookie = encodeURIComponent(sKey) + "=" + encodeURIComponent(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : "");
    return true;
  },
  removeItem: function (sKey, sPath, sDomain) {
    if (!this.hasItem(sKey)) { return false; }
    document.cookie = encodeURIComponent(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "");
    return true;
  },
  hasItem: function (sKey) {
    if (!sKey) { return false; }
    return (new RegExp("(?:^|;\\s*)" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
  },
  keys: function () {
    var aKeys =...