JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
	
<script type="text/javascript">
function displayquestion(a, ignore){
		var b = a-1;
		var currentInput = '';
		var questions = document.getElementsByClassName("questionholder");
		var showRequired = document.getElementById("requiredMessage");
		
		function showNext (){
			showRequired.style.display = "none";		
			
			for(var i=0; i < questions.length; i++) {			
				questions[i].style.display = "none";	
			}

			var nextQuestion = document.getElementById("question" + a);

			if(nextQuestion !== null) {
				nextQuestion.style.display = "block";
			}	
		}
		
		// Check if question should ignore inputs
		if (ignore == 1) { // yes, ignore the inputs so move on to next question
			console.log("path 1");
			
			showNext();
			
		} else { //no, don't ignore the inputs
			if (document.querySelector('input.input' + b).type == "radio") { //this is a radio input				
				if (document.querySelector('input[type=radio]:checked')) { //a radio option is selected
					console.log("path 2");
					console.log(document.querySelector('input[type=radio]:checked'));
					
					showNext();
					
				} else { // no radio option is selected so show error					
					console.log("path 3");
			
					showRequired.style.display = "block";
				}				
			} else { // not a radio input
				if (document.querySelector('input.input' + b) !== null) {
					var currentInput = document.querySelector('input.input' + b).value;
				}
				
				if (currentInput == '') { // the input is blank so show error
					console.log("path 4");
			
					showRequired.style.display = "block";
					
				} else { // the input is not blank so move on to next question
					console.log("path 5");
					
					showNext();
				}
			}
		}
	}	
</script>
</head>

<body>	
<div id="requiredMessage" style="display:none"><p>This field is required.</p></div>
	
<form id="TheForm" style="display:block;">
    <div data-toggle="buttons" class="questionholder multiplechoice"...

CSS

<style>		
	body {		
		font-family: arial;
	}
	
	h1 {
		font-size: 0.75em;
	}
	
	h5 {
		font-size: 0.5em;
		line-height: 1.5em;
		margin-block-start: 0;
	    margin-block-end: 0;
	}
	
	h6 {
		font-size: 0.35em;
		margin-block-start: 0;
		margin-block-end: 0;
	}
	
	br {
		line-height: 0.2em;
	}
	
	p {
		display: block;
   		margin-block-start: 0;
    	margin-block-end: 0;
    	margin-inline-start: 0px;
    	margin-inline-end: 0px;
	}
		
	.Title{		
		text-align: center;
		font-size: 3em;
		text-decoration: underline;
	}
	
	form { 
		margin: 0 auto; 
		width: 75%;
		text-align: center;
		font-size: 3em;
	}
	
	form#filledForm {
		display: table;
		table-layout: fixed;
		margin: 0 auto; 
		width: 100%;
		font-size: 1em;
	}
	
	form#filledForm th {
		text-align: left;
	}
	
	form#filledForm td {
		width: auto;
		font-size: 0.75em;
		vertical-align: bottom;
	}
	
	form#filledForm tr.aligncenter td {
		font-size: 0.75em;
		vertical-align: initial;
	}
	
	form#filledForm input[name=relSNonID1] { 
		margin-top: 0;
	}
	
	form#filledForm input[name=relSNonID2] { 
		margin-top: 0;
	}
	
	.questionholder {
		display: none;
	}
	
	input { 
		line-height: 1em; 		
		font-size: 1em;
		text-align: center;
		width: 100%;
		margin-bottom: 0.5em;
	}
	
	input[name=relSNonID1] { 
		margin-top: 0.2em;
	}
	
	input[name=relSNonID2] { 
		margin-top: 0.2em;
	}
	
	input[type=radio]{
		margin-bottom: 0;
		visibility:hidden;
	}
	
	input[type="radio"]:checked+label {
		border-style: solid;
		padding: 10px;		
	}
	
	div[data-toggle="buttons"] label.active{
 	   color: #7AA3CC;
	}

	div[data-toggle="buttons"] label {
		display: inline-block;
		margin-bottom: 0;
		vertical-align: top;
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		-o-user-select: none;
		user-select: none;
	}

	div[data-toggle="buttons"] label:hover {
		color: #7AA3CC;
	}

	div[data-toggle="buttons"] label:active, div[data-toggle="buttons"] label.active {
		-webkit-box-shadow:...