JSFiddle - React, Tailwind, and code Playground

by Troy Johnson

HTML

<!---Chess Board==-->
 <div class="c4">
 <!-- row 1=-->
<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 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" >test</div>
<div class="c2" >test2</div>
</div>

CSS

body {
	background-image: url("tealbackground.jpg");
	max-width: 100%;
	height: auto;
	background-repeat: no-repeat;background-size:cover;
	margin-left: 5px;
	margin-right: 5px;
	}
a:link {text-decoration: none;}

	/* unvisited link */
	a:link {color: #480000;}
	/* visited link */
	a:visited {color: #000066;}
	/* mouse over link */
	a:hover {color: #990066;}
	/* selected link */
	a:active {color: #CCFF33;}
	P, h2    {text-align: center;color:#003366}


	div.c4 {
	border: 5px solid #808080;    
	margin:auto;
    width: 720px;
	height: 720px;
	max-height:80vw;

	text-align: center;
max-width:80%;

	}

	div.c3 {

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

	max-height:10vw;
	}
	

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

	}