JSFiddle - React, Tailwind, and code Playground

by Douglas Crosby

HTML

<div id="holder">
    <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>

        
        <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>
...

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
	{
		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%;
    color:...