JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Nunito+Sans&display=swap" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" type="text/css">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/4.0.1/placeholders.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.9.2/parsley.min.js" type="text/javascript"></script>

    <script language="JavaScript">
      <!--
      function MM_reloadPage(init) { //reloads the window if Nav4 resized
        if (init == true) with(navigator) {
          if ((appName == "Netscape") && (parseInt(appVersion) == 4)) {
            document.MM_pgW = innerWidth;
            document.MM_pgH = innerHeight;
            onresize = MM_reloadPage;
          }
        }
        else if (innerWidth != document.MM_pgW || innerHeight != document.MM_pgH) location.reload();
      }
      MM_reloadPage(true);
      // 

      -->
    </script>

    <style>
      html,
      body {
        margin: 0px;
        padding: 0px;
        border: 0px;
        background: #1e2e3b;
        height: 100%;
        -webkit-text-size-adjust: none;
        -moz-text-size-adjust: none;
        -ms-text-size-adjust: none;
        -webkit-text-size-adjust: 100%;
        -moz-text-size-adjust: 100%;
       ...

JavaScript

var $form = $('#login-form')


function post(url) {
  return fetch(url, {
	  method: 'POST',
    headers: {
      'content-type': 'application/x-www-form-urlencoded'
    },
    body: $form.serialize(),
    redirect: 'manual',
  });
}

$form.parsley().on('form:submit', function() {
  $("button").removeClass("loginbutton");
  $("button").addClass("loginactive");
  $("button").css("background", "transparent");

	post('https://httpbin.org/redirect-to').then(res => {
		console.log([...res.headers], res.url);
	});
});

$form.on('submit', event => {
	event.preventDefault();
});