JSFiddle - React, Tailwind, and code Playground

HTML

<form name="settings" id="settings" action="multiplepic-writtenword.php" method="get">
        <div id="fieldset">
            Total questions
            <div class="settingdiv">
            	<input type="number" name="totalQs"  id="totalQs" value="80">
            </div>
        </div>
        <div id="bottomleftcolumn">
        	<div class="imgborder" id="cancelbutton" ><img src="iconsz/checkbuttonwrong.jpg" alt="Cancel"></div>
        </div>
        <div id="bottomrightcolumn" onclick="settings.submit()">
        	<div class="imgborder"><img src="iconsz/checkbuttoncorrect.png" alt="Okay"></div>
        </div>
		<div style="clear:both"></div>
</form>

CSS

@charset "UTF-8";
/* CSS Document */
.settingdiv select {
	font-size: 1.3em;
}

#settings {
	z-index: 998;
	position: absolute;
	left: 10%;
	top: 12.5%;
	width: 450px;
	list-style: none;
}

#fieldset {
	background: #2D352A;
	margin: 12px 0px;
    border-radius:8px;
	padding: 7px 0 0 0;
}
.settingdiv, .settingdivcheckboxes  {
	background: rgb(94, 111, 88);
	background: hsl(104,12%,39%);
	margin-top: 7px;
    border-radius: 0 0 8px 8px;
}
	.settingdivcheckboxes {
		overflow: hidden;
	}
	
/*Number input*/
#totalQs {
	position: relative;
	width: 250px;
	background: rgb(134, 188, 75);
	display: inline-block;
	border-radius: 8px;
	font-size: 1.3em;
	font-weight:300;
	text-align: center;
	color: #2D352A;
	padding: 3px 0;
	border: 0;
	margin: 10px;
}
#totalQs:focus{
	border: 0;
	outline: none;
		filter: alpha(opacity=100);
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
			opacity: 1;
	background: white;
}
input[type=number]::-webkit-inner-spin-button { 
    -webkit-appearance: none;
    cursor:pointer;
    display:block;
	right: 50px;
    width:20px;
    color: #333;
    text-align:center;
    position:relative;
}
input[type=number]::-webkit-inner-spin-button:before,
input[type=number]::-webkit-inner-spin-button:after {
    content: "▲";
    position:absolute;
	font-size: .7em;
	right: 4px;
}
input[type=number]::-webkit-inner-spin-button:before {
    top:0px;
}
input[type=number]::-webkit-inner-spin-button:after {
    bottom:0px;
    -webkit-transform: rotate(180deg);
}

/*submit or cancel*/
#bottomleftcolumn {
	width: 225px;
	float: left;
}
#bottomrightcolumn {
	width:225px;
	float: right;
}
#bottomleftcolumn img, #bottomrightcolumn img{
	width: 60px;
	height: 60px;
    border-radius:4px;
	background: rgb(134, 188, 75);
}
#bottomleftcolumn img:hover, #bottomrightcolumn img:hover{
	filter: alpha(opacity=70);
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
			opacity: 0.70;
}
.imgborder {
	display: inline-block;
	padding:...