JSFiddle - React, Tailwind, and code Playground

HTML

<body style="margin:0px;border:0px;padding:0px">
	<center>
		<div id="all">
			<div>
				<span class="dark" id="1"></span>
				<span class="light" id="2"></span>
				<span class="dark" id="3"></span>
				<span class="light" id="4"></span>
				<span class="dark" id="5"></span>
				<span class="light" id="6"></span>
			</div>
			<div>
				<span class="light" id="7"></span>
				<span class="dark" id="8"></span>
				<span class="light" id="9"></span>
				<span class="dark" id="10"></span>
				<span class="light" id="11"></span>
				<span class="dark" id="12"></span>
			</div>
			<div>
				<span class="dark" id="13"></span>
				<span class="light" id="14"></span>
				<span class="dark" id="15"></span>
				<span class="light" id="16"></span>
				<span class="dark" id="17"></span>
				<span class="light" id="18"></span>
			</div>
			<div>
				<span class="light" id="19"></span>
				<span class="dark" id="20"></span>
				<span class="light" id="21"></span>
				<span class="dark" id="22"></span>
				<span class="light" id="23"></span>
				<span class="dark" id="24"></span>
			</div>
			<div>
				<span class="dark" id="25"></span>
				<span class="light" id="26"></span>
				<span class="dark" id="27"></span>
				<span class="light" id="28"></span>
				<span class="dark" id="29"></span>
				<span class="light" id="30"></span>
			</div>
		</div>
	</center>

CSS

#all > div {
        clear: both;
        width: 300px;
        margin: 0 auto;
    }
    .dark{
		height: 50px;
		width: 50px;
		background-color: black;
		display: block;
        float: left;
	}
	.light{
		height: 50px;
		width: 50px;
		background-color: red;
		display: block;
        float: left;
	}

JavaScript

function disableSelection(target){
if (typeof target.onselectstart!="undefined") //IE route
	target.onselectstart=function(){return false}
else /*if*/ (typeof target.style.MozUserSelect!="undefined") //Firefox route
	target.style.MozUserSelect="none"
/*else //All other route (ie: Opera)
	target.onmousedown=function(){return false}*/
//target.style.cursor = "default"
}
disableSelection(document.getElementById("all"));