JSFiddle - React, Tailwind, and code Playground

HTML

<head lang="en">
    <title>Welcome</title>
</head>
<body>
    <div id = "background"></div>
    <div id = "main">
        <form name = "frm_choice">
            <label>Enter your text: <br>
                <textarea name = "txt" rows = "18" cols = "50" required></textarea>
            </label>
            <br>
            <label>Choose font style: <br>
                <select name = "font_size" required>
                    <option name = "small">Small</option>
                    <option name = "medium">Medium</option>
                    <option name = "large">Large</option>
                </select>
            </label>
        </form>
    </div>


    <footer>
                <input type="button" name="stay" onclick="skip_fun()" value="skip"/>
                <input class="button" id="red" type="button" onclick="red_fun()"/>
                <input class="button" id="blue" type="button" onclick="blue_fun()"/>
                <input class="button" id="green" type="button" name="GREEN" onclick="green_fun()"/>
    </footer>
                
                
<!-- Results.html
<head lang="en">
    <title></title>
</head>
<body>
    <h1>Hey look at results:</h1>
</body>
</html>
    -->

CSS

body {
    background-color: white;
}

#background {
    opacity: 0;
    min-height: 100%;
    min-width: 100%;
    position: static;
}

#main {
    position: static;
    width: 1px;
    min-width: 100%;
    height: 350px;
    background-color: white;
    text-align: center;
}

.button {
    min-width: 100%;
    height: 50px;
    font-size: 20px;
    font-family: monospace;
    font-weight: bolder;
    border: 5px solid white;
}

#red {
    background: linear-gradient(360deg, white, red, white);
    color: white;
}

#blue {
    background: linear-gradient(360deg, white, blue, white);
    color: white;
}

#green {
    background: linear-gradient(360deg, white, green, white);
    color: white;
}

footer {
    margin-top: 10%;
    position: static;
    text-align: center;
}

.red-text {
    color: red;
}

.green-text {
    color: green;
}

.blue-text {
    color: blue;
}

.large-text {
    font-size: 30px;
}

.medium-text {
    font-size: 20px;
}

.small-text {
    font-size: 10px;
}

JavaScript

fdfdfunction red_fun () {
	var newWin = open ("Results.html", "Results");
	
	var ptr = newWin.document.body.children [0];
	var content = window.document.forms[0].elements[0];
	var size = window.document.forms[0].elements[1].value;
	
	if (size == "Small")
		ptr.insertAdjacentHTML("afterEnd", "<p class='red-text small-text'></p>");
	if (size == "Medium")
		ptr.insertAdjacentHTML("afterEnd", "<p class='red-text medium-text'></p>");
	if (size == "Large")
		ptr.insertAdjacentHTML("afterEnd", "<p class='red-text large-text'></p>");
	ptr = newWin.document.body.children [1];
	ptr.insertAdjacentHTML ("afterBegin", content.value);

}

function green_fun () {
	var newWin = open ("Results.html", "Results");
	
	var ptr = newWin.document.body.children [0];
	var content = window.document.forms[0].elements[0];
	var size = window.document.forms[0].elements[1].value;
	
	if (size == "Small")
		ptr.insertAdjacentHTML("afterEnd", "<p class='green-text small-text'></p>");
	if (size == "Medium")
		ptr.insertAdjacentHTML("afterEnd", "<p class='green-text medium-text'></p>");
	if (size == "Large")
		ptr.insertAdjacentHTML("afterEnd", "<p class='green-text large-text'></p>");
	ptr = newWin.document.body.children [1];
	ptr.insertAdjacentHTML ("afterBegin", content.value);
	
	newWin.focus ();
}

function blue_fun () {
	var newWin = open ("Results.html", "Results");
	
	var ptr = newWin.document.body.children [0];
	var content = window.document.forms[0].elements[0];
	var size = window.document.forms[0].elements[1].value;
	
	if (size == "Small")
		ptr.insertAdjacentHTML("afterEnd", "<p class='blue-text small-text'></p>");
	if (size == "Medium")
		ptr.insertAdjacentHTML("afterEnd", "<p class='blue-text medium-text'></p>");
	if (size == "Large")
		ptr.insertAdjacentHTML("afterEnd", "<p class='blue-text large-text'></p>");
	ptr = newWin.document.body.children [1];
	ptr.insertAdjacentHTML ("afterBegin", content.value);
	
	newWin.focus ();
}

function skip_fun () {
	var newWin = open ("Index.html",...