JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="wrap">
  <div id="header">
      <h1>Simple Calculator</h1>
<form name="form" id="form"> 
    <input type="number" name="addta1" onkeyup="calc();"/>
  <span id="plusadd">+</span>
    <input type="number" name="addta2" onkeyup="calc();"/>
    =
    <span id="addresult"></span> 
    
    <br/>
    
    <input type="number" name="subta1" onkeyup="calc();"/>
    -
    <input type="number" name="subta2" onkeyup="calc();"/>
    =
    <span id="subresult"></span>
    
    <br/>
    
    <input type="number" name="multa1" onkeyup="calc();"/>
    *
    <input type="number" name="multa2" onkeyup="calc();"/>
    =
    <span id="mulresult"></span>
    
    <br/>
    
    <input type="number" name="divta1" onkeyup="calc();"/>
    /
    <input type="number" name="divta2" onkeyup="calc();"/>
    =
    <span id="divresult"></span>
    
    <br/>
  <div class="buttonwrap">
  <input onclick="calc();" type="submit" value="Submit" name="submit" method="post"/>
  <input type="reset" value="Reset" name="reset"/>
  </div>
</form>
  </div>
  </div>
  </body>

CSS

body{
background: -moz-linear-gradient(top,  rgba(246,248,249,1) 0%, rgba(229,235,238,1) 95%, rgba(215,222,227,1) 51%, rgba(245,247,249,1) 100%); /* FF3.6+ */
background: -webkit-linear-gradient(top,  rgba(246,248,249,1) 0%,rgba(229,235,238,1) 95%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(246,248,249,1) 0%,rgba(229,235,238,1) 95%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(246,248,249,1) 0%,rgba(229,235,238,1) 95%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* IE10+ */}

#wrap {
	width: 400px;
	height: 230px;
    background-color: #bbb;
	border: 1px solid #666;
	border-radius: 5px;
	margin: 100px auto;
}

input[type=number]{
  width:80px;
  padding:2px;}

input[name=divta2]{
  margin-left:2px;
}

input[name=subta2]{
  margin-left:1px;
}

input[name=addta2]{
  margin-left:-2px;
}

#plusadd{margin-left:-2px;}
.buttonwrap{position:absolute;z-index:0;}

input[type=submit]{
  padding:10px;
  margin:10px 0px 0px -1px;
  width:90px;
}

input[type=reset]{
  padding:10px;
  margin:10px 0px 0px 9px;
  width:90px;
}

#form{margin-top:10px;margin-left:10px;}

#header{	
  height: 50px;
	width: 400px;
	font-size: 18px;
	font-family: 'Arial' sans-serif;}

h1 {
	background-color: #ccc;
	border-bottom: 1px solid #666;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	color: #222;
	display: block;
	font-size: 20px;
	font-weight: bold;
	margin: 0;
	padding: 10px 0;
	text-align: center;
	text-decoration: none;
	text-shadow: 0px 1px 0px #fff;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999));
}

JavaScript

function calc() {
    var addOne = parseInt(document.form.addta1.value);
    var addTwo = parseInt(document.form.addta2.value);
    var subOne = parseInt(document.form.subta1.value);
    var subTwo = parseInt(document.form.subta2.value);
    var mulOne = parseInt(document.form.multa1.value);
    var mulTwo = parseInt(document.form.multa2.value);
    var divOne = parseInt(document.form.divta1.value);
    var divTwo = parseInt(document.form.divta2.value);
    
    var addResult = addOne + addTwo
    var subResult = subOne - subTwo
    var mulResult = mulOne * mulTwo
    var divResult = divOne / divTwo
    document.getElementById('addresult').innerHTML = addResult;
    document.getElementById('subresult').innerHTML = subResult;
    document.getElementById('mulresult').innerHTML = mulResult;
    document.getElementById('divresult').innerHTML = divResult;
    }