JSFiddle - React, Tailwind, and code Playground

by nazmoonnoor

HTML

<div id="pagewrap">
<div id="board">
<div id="card">
    </div>
    <div id="card">
    </div>
    <div id="card">
    </div>
    <div id="card">
    </div>
    <div id="card">
    </div>
    <div id="card">
    </div>
    <div id="card">
    </div>
    <div id="card">
    </div>
    <div id="card">
    </div>
    <div id="card">
    </div>
    <div id="card">
    </div>
    <div id="card">
    </div>
</div>
<div>
    <div>

CSS

#pagewrap
{display:flex;
display: -webkit-flex;
display: -moz-flex;
width:100%;
}
#board{
//padding: 5px;
background-color:#cccccc;
width:100%;
   height:70%;
}
#board > div {
		background-color: grey;
		border:#000 1px solid;

		//width:65px;
		//height:81px;
		//width:10%;
		//height:20%;
		float:left;
		margin:5px;
		padding:25px 20px;
		font-size:64px;
		cursor:pointer;
		box-shadow: 0px 5px 14px grey;
		border-radius: 5px;
		transition: 0.2s;

	}
#board > div:nth-child(6n+1) {
    clear: both;
}
#board > div:hover {
	box-shadow: 0px 0px 25px black;
	transition-timing-function: all ease-in-out;

}