JSFiddle - React, Tailwind, and code Playground

by SASSACB

HTML

<html>

  <head>
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">

    <style type="text/css">
      th,
      td {
        white-space: nowrap;
      }

      div.dataTables_wrapper {
        margin: 0 auto;
      }

      .center {
        text-align: center;
      }

      #loader {
        border: 8px solid #f3f3f3;
        border-radius: 50%;
        border-top: 8px solid blue;
        border-bottom: 8px solid blue;
        width: 30px;
        height: 30px;
        -webkit-animation: spin 2s linear infinite;
        animation: spin 2s linear infinite;
        visibility: hidden;
      }

      @-webkit-keyframes spin {
        0% {
          -webkit-transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
        }
      }

      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }

    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>



    <script>
      var script_url = "https://script.google.com/macros/s/AKfycbw9FUTvOEwsIHRVnlW78QLCL8xpiv_M_VFZL8M0OGwyVY5mOm8/exec";

      // Make an AJAX call to Google Script
      function insert_value() {

        $("#re").css("visibility", "hidden");
        document.getElementById("loader").style.visibility = "visible";
        $('#mySpinner').addClass('spinner');

        var id1 = $("#id").val();
        var name = $("#name").val();
        var pvp = $("#pvp").val();

        var url = script_url + "?callback=ctrlq&name=" + name + "&id=" + id1 + "&action=insert";


        var request = jQuery.ajax({
          crossDomain: true,
          url: url,
          method: "GET",
          dataType: "jsonp"
        });

      }

     ...