JSFiddle - React, Tailwind, and code Playground

by CodingGuy1984

HTML

<body>



    <div class="navbar" id="mynavbar" style="z-index:10">   
    <a>Navbar!</a>
    </div>

    <div class="main">
    <br>


<table width="100%" height="715" border=0>
    <tr><td width=550 valign=top>

<form name="Form1" id="ResetFormNotes" onsubmit="return false;" FormEntryThree="">
            
    <table type="table2"><tr><td width="200px"> 
     
                Option:<br>
    <select type="drop" class="formArea" onChange="changeQueue();myHiddenFunction();"  name="HiddenType" id="Question" >
        <option value="" disabled selected>...</option>
        <option value=" ">Yes</option>
        <option value="NotGeneral">No</option>
    </select><br>
    

    
    </td><td>

<div id="HiddenFunction" style="display: none">
                Hidden Option:<br>
    <select type="drop" class="formArea" name="HiddenType" onChange="LoyaltyDrop();myHiddenFunction2()" id="HiddenType" required disabled>
        <option value="" disabled selected>...</option>
        <option value="Normal Option 1">Option 1</option>
        <option value="HiddenOptionBonusMenu">Hidden Menu</option>
        <option value="Normal Option 2">Option 3</option>
    </select><br>
    
    </div>
    </td></tr></table>

                Name:<br>
    <input type="text" class="formArea" name="name" id="name" placeholder="Name" maxlength="29" required><br>
                Phone Number:<br>
    <input type="number" class="formArea" name="Phonenumber" id="PhoneNumber" placeholder="Phone number" min="0" max="9999999999" oninput="if (value.length>10)value=value.slice(0,10)" required><br>    
    <table type="table2"><tr><td width="200px">
                Question 1:<br>
    <select type="drop" class="formArea" name="Question1" id="questionOne" required>
        <option value="" disabled selected>...</option>
        <option value="Yes">Yes</option>
        <option value="No">No</option>
    </select><br>    
    </td><td>    
                Question 2:<br>
    <select type="drop"...

CSS

body {
    margin:0;
    background-color: #0082bb;
    color: #2C3E60;
    font-size: ; 
    font-family: arial; 
    font-weight: bold;
    font-family: ; 
    line-height: 1.2;
    overflow: hidden;
    width: 100%;
    }
    p, td, th {
    font-size: ; 
    font-family: ; 
    }
    table, th, td {
    border: 0px solid black;
    padding: 0px;
    }
    table {
    border-spacing: 10px 0px;
    }
    table[type="table2"] {
    border-spacing: 0px 0px;
    }

    form {
    margin: 0px;
    padding: 0px;
    }
    .main {
    padding: 0px;
    margin-top: 71px; 
    width: 100%;
    height: 91%; 
    position:absolute;
    overflow-y:auto;
    overflow-x:auto;
    }
    

    .navbar {
    overflow: ;
    background-color: #006f9f;
    min-height: 71px; 
    position: fixed;
    /*z-index: 2;*/
    top: 0;
    width: 100%;
    line-height: 1.07;
    font-size: 3em;
    border-bottom: 2px solid #2C3E60;
    border-top: 2px solid #2C3E60;
    }

    .navbar a {
    float: left;
    display: block;
    color: #ffffff;
    text-align: center;
    padding: 10px 10px;
    text-decoration: none;
    font-size: 40px;
    font-weight: bold;
    }


    /*Input and form modifiers start */
    /* THE TEXT */
    input[type="text"] {
    width: 250px;
    padding: 5px 10px;
    margin: 5px 0;
    box-sizing: border-box;
    font-family: arial;
    font-weight: bold; 
    line-height: 1.2;
    background-color: #F4F6FA;   
    color: #577CC1; 
    border: 4px solid #577CC1;
    border-radius: 10px;
    }
    input[type="text"]:focus {
    border: 4px solid #006f9f;
    outline: none;
    }
    input[type="text"]:enabled {
    background-color: #F4F6FA;
    }
    input[type="text"]:disabled {
    background-color: lightgrey;
    }
    input[type="text"]:valid {
    background-color: #E4E9F3;
    }

    /* THE NUMBER */
    input[type="number"] {
    width: 250px;
    padding: 5px 10px;
    margin: 5px 0;
    box-sizing: border-box;
    font-family: arial;
    font-weight:...

JavaScript 1.7

<script>


        //function convertOutput(){
          //  var output = document.getElementById("output").value;
            //SecondDIVOutput.innerHTML+=   "<div><time id='time'></time><br /><br />" + output +"<span class='close'>&times;</span><br /><hr /></div>";
        //}

        function convertOutput(){
            var output = document.getElementById("output").value;
            SecondDIVOutput.innerHTML+=   "<ul><li><time id='time'></time>"+ output +"<br /><br /><span class='close'>&times;</span></li></ul>";
        }


</script>




<script>

var closebtns = document.getElementsByClassName("close");
var i;

for (i = 0; i < closebtns.length; i++) {
  closebtns[i].addEventListener("click", function() {
    this.parentElement.style.display = 'none';
  });
}
</script>




<script>

var MONTH_NAME = ['January', 'Febuary', 'March', 'April', 'May', 'June',
                  'July', 'August', 'September', 'October', 'November', 'December'];
function showTime() {
    function twoDigit(n) {
        return ('0' + n).slice(-2);
    }
    function iso8601(date) {
        return date.getFullYear() +
               '-' + twoDigit(1 + date.getMonth()) +
               '-' + twoDigit(date.getDate()) +
               'T' + twoDigit(date.getHours()) +
               ':' + twoDigit(date.getMinutes());
    }
    function en_US(date) {
        var h = date.getHours() % 12;
        return MONTH_NAME[date.getMonth()] +
               ' '  + date.getDate() +
               ', ' + date.getFullYear() +
               '<br />' + (h == 0 ? 12 : h) +
               ':'  + twoDigit(date.getMinutes()) +
               ' ' + (date.getHours() < 12 ? 'am' : 'pm');
    }
    
    var timeEl = document.getElementById('time');
    if (timeEl !== null) {
        var now = new Date();
        timeEl.innerHTML = en_US(now);
        timeDiv.setAttribute('datetime', iso8601(now));
    }
};
setInterval(showTime, 1000);

</script>






<script>



    function convert() {
    var HiddenType =...