JSFiddle - React, Tailwind, and code Playground

HTML

<div id="isOnline">Your navigator is</div>
<h2>My form</h2>
<form action="/echo/json/" method="post" id="myForm">
  <p>
    <label>A text input 
            <input type="text" placeholder="Enter value" name="textinput" />
        </label>
  </p>
  <p>
    <label>A checkbox
            <input type="checkbox" name="checkbox" />
        </label>
  </p>
  <p>
    <input type="submit" value="Send form" />
  </p>
</form>
<h2>Log : </h2>
<div id="log"></div>

CSS

#isOnline {
  background: #E22;
  color: white;
  text-align: center;
  padding: 10px;
}

#isOnline:after {
  content: ' offline';
}

#isOnline.online {
  color: black;
  background: #3D3;
}

#isOnline.online:after {
  content: ' online. Try to turn it off before submitting the form.';
}

#myForm {
  border: 1px solid black;
  padding: 10px;
  text-align: center;
}

#log {
  border: 1px solid black;
  padding: 10px;
  min-height: 150px;
}

pre {
  margin-left: 40px;
  background: #CCC;
  padding: 10px;
  word-warp: break-word;
}

JavaScript

/**
 * offlineForm minified version
 * @version 0.2
 * @link https://github.com/Brewal/offlineForm
 */
(function(e) {
  function r() {
    form = e(this);
    if (navigator.onLine) {
      if (n.onlineAjaxSend) {
        if (n.beforeOnlineAjaxSend) {
          n.beforeOnlineAjaxSend()
        }
        e.ajax({
          type: form.attr("method"),
          url: form.attr("action"),
          data: form.serialize(),
          success: function(e) {
            if (n.onlineAjaxCallback) {
              n.onlineAjaxCallback(e)
            }
          }
        }).fail(function(e) {
          if (n.onError) n.onError(e);
          return false
        });
        return false
      }
      return true
    }
    action = form.attr("action");
    if (action === "") action = document.location.href;
    if (localStorage[n.key] === undefined) {
      localStorage[n.key] = JSON.stringify([])
    }
    data = JSON.parse(localStorage[n.key]);
    if (data.length) {
      e.each(data, function(e, t) {
        if (t === null) {
          data.splice(e, 1)
        }
      })
    }
    if (n.beforeStorage) n.beforeStorage(data.length, data);
    data.push({
      action: action,
      urlEncoded: form.serialize(),
      method: form.attr("method")
    });
    if (n.onStorage) n.onStorage(data.length, data);
    localStorage[n.key] = JSON.stringify(data);
    return false
  }
  var t = {
    key: "offlineForm",
    classname: "offlineForm",
    onlineAjaxSend: false,
    autoSync: true,
    beforeSync: null,
    afterSync: null,
    onSync: null,
    beforeStorage: null,
    onStorage: null,
    onError: null,
    beforeOnlineAjaxSend: null,
    onlineAjaxCallback: null
  };
  var n = t;
  var i = {
    init: function(t) {
      return this.each(function() {
        n = e.extend(n, t);
        form = e(this);
        if (!form.hasClass(n.classname)) {
          form.on("submit", r);
          form.addClass(n.classname)
        }
      })
    },
    sync: function() {
      if...