JSFiddle - React, Tailwind, and code Playground

by AnnmarieGajdos

HTML

<div class="board">
<div class="bluesquare"><img class="centered" alt="white king" src="http://cis3630.org/white-king.png"></div>
<div class="graysquare"></div>
<div class="bluesquare"></div>
<div class="graysquare"></div>
<div class="bluesquare"></div>
<div class="graysquare"><img class="centered" alt="white king" src="http://cis3630.org/white-king.png"></div>
<div class="bluesquare"></div>
<div class="graysquare"></div>
<div class="bluesquare"></div>
<div style="clear: both;"></div>
</div>

CSS

<!DOCTYPE><html><head>

img { border-style:25px solid #333;margin-left:auto;margin-right:auto; }
}  
div.board {width:920px;height:920px;margin-right: auto;margin-left: auto;}  
div.bluesquare {width:300px;background-color:blue;float:left;height:300px;}      
div.graysquare {width:300px;background-color:gray;float:left;height:300px;} 
img.centered {display: block;margin-left: auto;margin-right: auto }

@media only screen and (max-width: 1024px) {
div.board {width:590px;height:590px;border-width:10px:solid;border-color:black;margin-right: auto;margin-left: auto;}  
div.bluesquare {width:190px;background-color:blue;float:left;height:190px;}      
div.graysquare {width:190px;background-color:gray;float:left;height:190px;} 
img.centered {display: block;margin-left: auto;margin-right: auto;height:50%;width:auto; }  
}
@media only screen and (max-width: 768px) {
div.board {width:320px;height:320px;border-width:10px:solid;border-color:black;margin-right: auto;margin-left: auto;}  
div.bluesquare {width:100px;background-color:blue;float:left;height:100px;}      
div.graysquare {width:100px;background-color:gray;float:left;height:100px;} 
img.centered {display: block;margin-left: auto;margin-right: auto;height:50%;width:auto; }  
}
img.sheet {width: 100%;height: auto;}
a:visited {color: #FF00FF;} a:hover {color: #00FF00;}