JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang = "en">
    <head>
        <link rel="stylesheet" href="styles.css">
        <meta charset="UTF-8">
        <title>Additive Generator</title>
    </head>

    <body>
        <header>
            <h1> Generate a waveform</h1>
            <h3> an <em>audio-visual</em> experience </h2>
        <nav>
            <ul>
                <li>Home</li>
                <li>About</li>
                <li>Create</li>
            </ul>
        </nav>
        </header>

        <form id = "inputForm">
            <div id="dataContainer">

                <div>
                    <label>Harmonics</label>
                    <input class="DataInput" type="number" value="10">
                </div>

                <div>
                    <label>Amplitude</label>
                    <input class="DataInput" type="number" value="10">
                </div>

                <div>
                    <label>Frequency</label>
                    <input class="DataInput" type="number" value="10">
                </div>

            </div>

            <div id = "waveformContainer">
                <div class = "waveform">
    		        <label for "Square">Square</label>   <!-- Insert Image-->
                    <input name="waveform" type="radio" value="1">
                </div>          
            
                <div class = "waveform">
                    <label for "Saw">Saw</label>
                    <input name="waveform" type="radio"value="2">
                </div>
            
                <div class = "waveform">
                    <label for"Mix">Mix</label>
                    <input name="waveform" type="radio"value="3">
                </div>
            </div>
        </form>

        <div class="Info">
          The new section The sectionThe new sectionThe new sectionThe new sectionThe new sectionThe new sectionThe new section
        </div>
  </body>
</html>

CSS

header{
    background: black;
    color:rgb(0, 183, 255);
    font-size: 24px;
    padding:10px 10px 1px 10px;
}

h1{
    margin:0px;
    font-size: 28px;
    border-bottom: 2px solid currentColor;  /* line at top. TODO: make it turn into wave (D3 library maybe) */
}

h2{
    margin:0px 0px 0px 30px;
    font-size: 14px;
}

body{
    margin:0%;
    background: rgb(58,58,58);
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    color:white;
}

nav {
    background: black;
    display: flex;
    padding:0px;
    float:right;
    margin-top:-50px;  /* Because of float */
}

ul {
    margin: 0px;
    padding:0px;
}

li{
    font-size: 0.8em;
    display:inline-block;  /* Horizontal menu */
}

/* All input */     
#inputForm{
    display: inline-block;
    background-color: darkgoldenrod;
}
#inputForm * { /* targets everything inside */
    margin:5px;
}
#inputForm input{
    width:42px;
    background-color: darkred;
}
.DataInput{
    width:4%;
    background-color:gray ;
}
.waveform{
    float:left;
    background-color: darkorchid;
}
.waveform label {
    display: inline-block;
    margin:0px;
    padding:0px;
}

#dataContainer{
    background-color: black;
}

#waveformContainer{
    display:inline-block;
    background: darkgreen;
}

.Info{
    display:inline-block;
    background-color: darkmagenta;
}