JSFiddle - React, Tailwind, and code Playground

HTML

<section id="bal_attacker" class="fieldCol">
								<h2>Attacker:</h2>
								<label for="bal_BS1">BS:</label> <br>
								<button type="button" id="bal_BS1inc" class="incbut"> + </button> 
								<input type="number" id="bal_BS1" value="1" class="inputField"> 
								<button type="button" id="bal_BS1dec" class="decbut"> - </button> <br> 
								
								<label for="bal_S">S:</label> <br>
								<button type="button" id="bal_Sinc" class="incbut"> + </button> 
								<input type="number" id="bal_S" value="1" class="inputField"/>
								<button type="button" id="bal_Sdec" class="decbut"> - </button> 
							</section>
				 
							<section id="bal_defender" class="fieldCol" >
								<h2>Defender:</h2>

								<label for="bal_T">T:</label> <br>
								<button type="button" id="bal_Tinc" class="incbut"> + </button> 
								<input type="number" id="bal_T" value="1" class="inputField"> 
								<button type="button" id="bal_Tdec" class="decbut"> - </button>  <br> 
							</section>

<!--
</div>
</div>
						
-->
						<div>
							
							<section title="bal_Modifiers" class="modifiers">
						<h2 style="text-align:center;">Modifiers:</h2>
						<br>
						<span class="checkboxbox2">
						<input type="checkbox" id="bal_harmConv" class="regular-checkbox" /><label for="bal_harmConv"></label>
						<label for="bal_harmConv" class="checkBoxLabel">Harm. Conv.</label>
						</span>
						
						<span class="checkboxbox2">
						 <input type="checkbox" id="bal_rrToHit" class="regular-checkbox" /><label for="bal_rrToHit"></label>
						<label for="bal_rrToHit" class="checkBoxLabel">R.r. to hit</label>
						</span>

						<span class="checkboxbox2">
						<input type="checkbox" id="bal_rrToW" class="regular-checkbox" /><label for="bal_rrToW"></label>
						<label for="bal_rrToW" class="checkBoxLabel">R.r. to wound</label>
						</span>
						<div style="clear: both;"></div>
						</section>
							
			<div style="clear: both;"></div>

CSS

.incbut,.decbut,.rollButton{
	background-color:#FF961F;}

.regular-checkbox{
	border-color:#FF961F;}

body {background-color:#FCB41B;
		color:#753B08;		}

.modifiers
{
	text-align:left;
	min-width:8em;
	
}

		.center
		{
		margin-left:auto;
		margin-right:auto;
		}
		
		.inputField
		{
			max-width:2em;
			border:1px #bababa solid;
			vertical-align:middle;
			text-align:center;
		}
		
		.incbut,.decbut
		{
			border: 1px transparent solid;
			display: inline-block;
			text-align: center;
			vertical-align: middle;
			cursor: pointer;
			padding: 4px 10px;
			position: relative;
			width: 2.5em;
	
		}
		
		.rollButton
		{
			border: 1px transparent solid;
			display: inline-block;
			text-align: center;
			vertical-align: middle;
			cursor: pointer;
			padding: 4px 10px;
			position: relative;#FF0000
		}
		
	button:active
	{
		background-color:#FF0000;
	}
	.fieldCol
	{
		float:left;
		text-align:center;
		max-width=45%;
		height:9em;
	}

		
 	input[type=number]::-webkit-inner-spin-button,
	input[type=number]::-webkit-outer-spin-button 
	{
		-webkit-appearance: none;
		margin: 0;
	}

	.incbut,.inputField, .decbut
	{
		min-height:2em;
		margin-right:0.5em; 
		margin-bottom:0.3em; 
		}
	h2
	{
		margin:0.1em;
		font-weight:500;

	}
	
	h2,button, input
	{
		font-family:inherit;
		
	}
	
		.outputField
	{
		padding:2px;
		margin:3px;
		border:1px #753B08 solid;
		width=2em;
		line-height:1.7em;
		white-space:nowrap;	
		}

label {
    display: inline;
}
 
 .checkBoxLabel{
 margin-left:5px;
 font-size:90%;
 }
 
.regular-checkbox {
    display: none;
	

}
 
.regular-checkbox + label {
    border: 3px solid #FF961F;
    padding: 9px;
	background-color: #FFFFFF;
    display: inline-block;
    position: relative;	
   	vertical-align:middle;
   	
	margin: .1em;
}
 
 
 .regular-checkbox:checked + label {
    border: 3px solid #FF961F;}

 
.regular-checkbox:checked + label:after {
    content: '\2716';
    font-size: 1em;
    position: absolute;
    top: 0px;
    left: 10%;
   ...