JSFiddle - React, Tailwind, and code Playground

HTML

<title>Untitled Document</title>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>

<body>


<div id = "calculator">
  <div id="top">	
		<div class= "toptext">  
			<span>Bet Type</span>
	    	<select id = "typeoption"> 
				<option value="0">Qualifying Bet</option> 
			</select>
		</div>	
			 
  </div>
	
	<div id = "back">
		<div id="bstake"> 
			<span>Back Stake:</span>   
                        <input id="backstaketext" type="number"/>
			
			<div style="display:none;" id="sreturned">Stake Returned:</div>
			<input style="display:none;" id="checkbox" type="checkbox" value="backstaketext">
			
			<div style="display: none" id="cashback">Refund:</div>
			<input style="display:none" id="cashbacktext" type="number"/>
			
		
		</div>
		
		<div id="bodds">
			<span>Back Odds:</span>
		  	<input id="backoddstext" type="number"/>
		</div>

		<div id="bcom">
			<span>Back Commission:</span>
		  <input id="backcomtext" type="number" placeholder="0"/>
		</div>
	</div>
	

	<div id = "lay">
		
		<div id="lodds">
			<span>Lay Odds:</span>
			<input id="layoddstext" type="number"/>
		</div>

		<div id="lcom">
			<span>Lay Commission:</span>
			<input id="laycomtext" type="number" placeholder="2"/>
		</div>
	</div>

	<div class="bottom">
		<span id="bottomtext"> Lay Stake Required: </span>
		<span id="addon">£</span>
		<input id="display" type="text" readonly size="15">
		<span id="button1" onclick="dispatcher();">Calculate</span> 
	</div>
</div>


<div id="results">
	<div id="resultstop">
		<div class="resultstext">
			<span> Results </span>
		</div>
		<div id="whowon">
			<span id="bookiewintext">Bookie</span>
			<span id="exchangewintext">Exchange</span>
			<span id="totaltext">Total</span>
		</div>
	</div>
	
	<div id="backwin">
		<div id="backwintext">
			<span> If Back Bet Wins </span>
			<input id="display1" type="text" readonly>
			<input id="display2" type="text" readonly>
			<span class="sign">=</span>
			<input id="display3" type="text"...

CSS

#calculator
{
	width: 580px;
	height: 159px;
	margin: 20px auto;
	margin-bottom: 0px;
	padding-top: 2px;
	padding-bottom: 210px;
	padding-right: 2px;
	padding-left: 2px;
	border: solid;
	border-width: thin;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}
#top
{
	background: #232626;
	margin-left: -2px;
	margin-right: -2px;
	margin-top: -2px;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
	height: 46px;
}
.toptext
{
	color: white;
	margin-left: 35px;
	padding-top: 9px;
	font-size: 20px;
}
#typeoption
{
	margin-left: 22px;
	margin-top: -20px;
	cursor: pointer;
}
#back
{
	margin-top: 5px;
	margin-left: auto;
	margin-right: auto;
	background: #00b073;
	border-radius: 6px;
	height: 135px;
	width: 573px;
}
#bstake
{
	padding-left: 25px;
	padding-top: 22px;
	font-size: 20px;
}
#sreturned
{
	margin-left: 56.5px;
	font-size: 20px;
	display: inline;
}
#cashback
{
	margin-left: 120.5px;
	font-size: 20px;
	display: inline;
}
#bodds
{
	padding-left: 25px;
	margin-top: 29.5px;
	font-size: 20px;
}
#bcom
{
	margin-left: 273px;
	margin-top: -29px;
	font-size: 20px;
}
#backstaketext
{
	border-radius: 5px;
	width: 100px;
	margin-left: 8px;
	height: 25px;
	font-size: 20px;
	border: solid;
	border: 2px;
	border: thin;
}
#checkbox
{
	margin-left: 10px;
	cursor: pointer;
}
#cashbacktext
{
	border-radius: 5px;
	width: 100px;
	margin-left: 10px;
	height: 25px;
	font-size: 20px;
	border: solid;
	border: 2px;
	border: thin;
}
#backoddstext
{
	border-radius: 5px;
	width: 100px;
	margin-left: 10px;
	height: 25px;
	font-size: 20px;
	margin-top: 0px;
	border: solid;
	border: 2px;
	border: thin;
}
#backcomtext
{
	border-radius: 5px;
	width: 100px;
	margin-left: 10px;
	margin-top: 2px;
	height: 25px;
	font-size: 20px;
	border: solid;
	border: 2px;
	border: thin;
}
#lay
{
	
	margin-top: 5px;
	margin-left: auto;
	margin-right: auto;
	background: #0c5dab;
	border-radius: 6px;
	height: 135px;
	width:...