JSFiddle - React, Tailwind, and code Playground

by CodingGuy1984

HTML

<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...

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;
   ...

JavaScript

document.getElementById("Add").onclick = function(e) {
convertOutput();
}

function convertOutput(){

    //convertOutput.addEventListener('close', function() {
    //this.parentElement.style.display = 'none';
    //}
    //});

    var output = document.getElementById("output").value;
    //var ul = document.createElement('ul');
    //ul.className = "boxcontainer";
    var li = document.createElement('li');
    li.className = "containedboxes";
    //var currentTime = getCurrentTime();
    var dateTime = todayDateTime();

    li.innerHTML = "<time id='time'>" + dateTime +"</time><br /> <br />"+ output +"<br /><br /><span class='close'>&times;</span>";
       document.getElementById('outputListItem').prepend(li);
    }






function todayDateTime() {

    var monthNames = ["January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"
];
    var todayDate = new Date();
    var getTodayMonth =  todayDate.getMonth()+0;
    var getTodayDate = todayDate.getDate();
    var addSuffix = dateSuffix(getTodayDate);
    var getTodayFullYear = todayDate.getFullYear();
    var getCurrentHours = todayDate.getHours();
    var getCurrentMinutes = todayDate.getMinutes();
    var getCurrentAmPm = getCurrentHours >= 12 ? 'PM' : 'AM';
    getCurrentHours = getCurrentHours % 12;
    getCurrentHours = getCurrentHours ? getCurrentHours : 12; 
    getCurrentMinutes = getCurrentMinutes < 10 ? '0'+getCurrentMinutes : getCurrentMinutes;
    
    var getCurrentDateTime = monthNames[getTodayMonth] + ' ' + getTodayDate + addSuffix + ' ' + getTodayFullYear +'<br />' + getCurrentHours + ':' + getCurrentMinutes + '' + getCurrentAmPm;
    
    

    return(getCurrentDateTime);
    }
    
   

    function dateSuffix(i) {
    var j = i % 10,
        k = i % 100;
    if (j == 1 && k != 11) {
        return "st";
    }
    if (j == 2 && k != 12) {
        return "nd";
    }
    if (j == 3 && k != 13) {
        return "rd";
    }
    return...