JSFiddle - React, Tailwind, and code Playground

HTML

<div id="DCRightPanelDiv">
<div class="ProcOuterDiv"><div data-val1="1" onclick="SelectProc(this);" class="Proc">Cr</div></div><!--
--><div class="ProcOuterDiv"><div data-val1="2" onclick="SelectProc(this);" class="Proc">Br</div></div><!--
--><div class="ProcOuterDiv"><div data-val1="3" onclick="SelectProc(this);" class="Proc">Ca</div></div><!--
--><div class="ProcOuterDiv"><div data-val1="4" onclick="SelectProc(this);" class="Proc">Fill</div></div><!--
--><div class="ProcOuterDiv"><div data-val1="5" onclick="SelectProc(this);" class="Proc">MT</div></div><!--
--><div class="ProcOuterDiv"><div data-val1="6" onclick="SelectProc(this);" class="Proc">Im</div></div><!--
--><div class="ProcOuterDiv"><div data-val1="7" onclick="SelectProc(this);" class="Proc">RC</div></div><!--
--><div class="ProcOuterDiv"><div data-val1="8" onclick="SelectProc(this);" class="Proc">Den</div></div><!--
--><div class="ProcOuterDiv"><div data-val1="9" onclick="SelectProc(this);" class="Proc">MOB</div></div><!--
--><div class="ProcOuterDiv"><div data-val1="10" onclick="SelectProc(this);" class="Proc">Im</div></div><!--
--><div class="ProcOuterDiv"><div data-val1="11" onclick="SelectProc(this);" class="Proc">SP</div></div>
</div>

CSS

#DCRightPanelDiv{
		display:inline-block;
		width:235px;
		height:520px;
		background:#F7F2E6;
	}
.ProcOuterDiv{
		#margin:4px 5px 4px 5px;
		display:inline-block;
		height:26px;
		width:26px;
	}
	.Proc{
		margin:2px 2px 2px 2px;
		height:23px;
		width:23px;
		#padding:2px 2px 2px 2px;
		border: 2px solid #A3A0FA;
		border-radius: 1px;
		text-align:center;
	}
	.Proc:hover{
		border: 3px solid #F77C60;
		border-radius: 5px;
		cursor:pointer;
		box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(252, 69, 69, 0.8) !important;
	}