JSFiddle - React, Tailwind, and code Playground

by Troy Johnson

HTML

<!---Chess Board==-->
 <div class="c4">
 <!-- row 1=-->
<div class="c2" >&#9820;</div>
<div class="c3" >&#9820;</div>
<div class="c2" >&#9820;</div>
<div class="c3" >&#9820;</div>
<div class="c2" >&#9820;</div>
<div class="c3" >&#9820;</div>
<div class="c2" >&#9820;</div>
<div class="c3" >&#9820;</div>
<!---row 2===-->
<div class="c3" ></div>
<div class="c2" ></div>
<div class="c3" ></div>
<div class="c2" ></div>
<div class="c3" ></div>
<div class="c2" ></div>
<div class="c3" ></div>
<div class="c2" ></div>
<!-- row 3=-->
<div class="c2" ></div>
<div class="c3" ></div>
<div class="c2" ></div>
<div class="c3" ></div>
<div class="c2" ></div>
<div class="c3" ></div>
<div class="c2" ></div>
<div class="c3" ></div>
<!---row 4===-->
<div class="c3" ></div>
<div class="c2" ></div>
<div class="c3" ></div>
<div class="c2" ></div>
<div class="c3" ></div>
<div class="c2" ></div>
<div class="c3" ></div>
<div class="c2" ></div>
<!-- row 5=-->
<div class="c2" ></div>
<div class="c3" ></div>
<div class="c2" ></div>
<div class="c3" ></div>
<div class="c2" ></div>
<div class="c3" ></div>
<div class="c2" ></div>
<div class="c3" ></div>
<!---row 6===-->
<div class="c3" ></div>
<div class="c2" ></div>
<div class="c3" ></div>
<div class="c2" ></div>
<div class="c3" ></div>
<div class="c2" ></div>
<div class="c3" ></div>
<div class="c2" ></div>
<!-- row 7=-->
<div class="c2" ></div>
<div class="c3" ></div>
<div class="c2" ></div>
<div class="c3" ></div>
<div class="c2" ></div>
<div class="c3" ></div>
<div class="c2" ></div>
<div class="c3" ></div>
<!---row 8===-->
<div class="c3" ></div>
<div class="c2" ></div>
<div class="c3" ></div>
<div class="c2" ></div>
<div class="c3" ></div>
<div class="c2" ></div>
<div class="c3" ></div>
<div class="c2" ></div>
</div>
<br />

CSS

body {
	background-image: url('http://rinkesh.domainsforauthors.com/1190164.jpg');
	max-width: 100%;
	height: auto;
	background-repeat: repeat;
	margin-left: 5px;
	margin-right: 5px;
	}
a:link {text-decoration: none;}


div {
    font-size: 100%;
}
	/* unvisited link */
	a:link {color: #CCCCCC;}
	/* visited link */
	a:visited {color: #CCCCCC;}
	/* mouse over link */
	a:hover {color: #ffffff;}
	/* selected link */
	a:active {color:fuchsia;}
	P, h2    {text-align: center}


	div.c4 {
	margin:auto;
    width: 640px;
	height: 640px;
	max-height:10vw;
	text-align: center;
	max-width:80%;
	

	}

	div.c3 {

    height:80px;width:80px;
    background-color:#999;
    float: left;
	max-width:12.5%;
	position:relative;
	background-repeat: repeat;

	max-height:10vw;
	}
	

    div.c2 {height:80px;width:80px;
    background-color:#FFF;
    float: left;
	max-width:12.5%;
	position:relative;
	background-repeat: repeat;
	
	max-height:10vw;
	

	}