JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en" manifest="/cache.manifest">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="keywords" content="Openreach, Site Survey">
<title>Online Survey Form for Sitec IS - Openreach</title>
<link rel="icon" href="https://cdn.forms.office.net/forms/images/favicon.ico" />
<link rel="stylesheet" href="../css/main.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="javascript/parsley.min.js"></script>
<script>
// Dynamic header & footer
$(function(){
$("#header").load("../header.html");
$("#footer").load("../footer.html");
});
</script>
<script>
window.onbeforeunload = function() {
return "Data will be lost if you leave the page, are you sure?";
};
$(document).on("submit", "form", function(event){
window.onbeforeunload = null;
});
</script>
<script>
// Switching between the form pages
function show(shown, hidden) {
document.getElementById(shown).style.display='block';
...