JSFiddle - React, Tailwind, and code Playground

HTML

<head>
        <style>
            hr {
            background-color: black;
            margin: 2px auto;
            width: 100%;
            height: 2px;
            }

            .container{
            width: 500px;
            padding: 15px;
            background-color:   #D3D3D3;
            box-shadow: 10px 10px 5px 0px #8c878c;
            }
            body {
                background-color:   #EEE8AA;
            }
            form  { display: table; }
            p     { display: table-row;  }
            label { display: table-cell; }
            input { display: table-cell; }
        </style>
    </head>
    <body>
        <form name="gradecal">
            <div class="container">
                <p>
                    <label for="a">First Name: </label>
                    <input type="text" name="fname"/>
                </p>
                <p>
                    <label for="a">Last Name: </label>
                    <input type="text" name="lname"/>
                </p>
                <p>
                    <label for="a">Grade #1: </label>
                    <input type="text" name="grd1"/>
                </p>
                <p>
                    <label for="a">Grade #2: </label>
                    <input type="text" name="grd2"/>
                </p>
                <p>
                    <label for="a">Grade #3: </label>
                    <input type="text" name="grd3"/>
                </p>
                <p>
                    <label for="a">Grade #4: </label>
                    <input type="text" name="grd4"/>
                </p>
                <p>
                    <label for="a">Grade #5: </label>
                    <input type="text" name="grd5"/>
                </p>
                <p>
                    <input type="button" value="Submit" onclick="getGrades();" />
                </p>
            </div>
        </form>
        <script>
            function getGrades(){
            // initialize variables
    ...