JSFiddle - React, Tailwind, and code Playground

by zachooz

HTML

<!DOCTYPE html>
	<body>
	<header class="title">
		<h1 class="Slick big">Battleship</h1>
	</header>
		<div id="instructions"></div>
	<section>
	
		<article class="inLine Boards firstBoard">
		<div class="Slick medium"><h1>Your Board</h1></div></div><div class="numberTop">1 2 3 4 5 6 7 8 9 10</div> <br>
		<div class="number">&#160;&#160;1</div></div><div class="box"></div><div class="box"></div><div class="box"></div><div  class="box"></div><div  class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><br>
		<div class="number">&#160;&#160;2</div><div class="box"></div><div class="box"></div><div class="box"></div><div  class="box"></div><div  class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><br>
		<div class="number">&#160;&#160;3</div><div class="box"></div><div class="box"></div><div class="box"></div><div  class="box"></div><div  class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><br>
		<div class="number">&#160;&#160;4</div><div class="box"></div><div class="box"></div><div class="box"></div><div  class="box"></div><div  class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><br>
		<div class="number">&#160;&#160;5</div><div class="box"></div><div class="box"></div><div class="box"></div><div  class="box"></div><div  class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><br>
		<div class="number">&#160;&#160;6</div><div class="box"></div><div class="box"></div><div class="box"></div><div  class="box"></div><div  class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><br>
		<div...

CSS

.box {
    height:50px;
    width:50px;
    display: inline-block;
	background-color:#00FFFF;
	border: 1px; 
	box-shadow: 0 0 0 3px rgba(0,0,0,0.1);
	margin:3px;
	

}

.box:hover {
	background-color:#00CDCD;

}

body {
	background: url('../images/wave3.jpg') no-repeat center center fixed;
	-moz-background-size: cover;
	-webkit-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

@font-face {
	font-family: "Slick";
	src: url("../Fonts/Slick.otf");
}

@font-face {
	font-family: "Flow";
	src: url("../Fonts/Flow.otf");
}

@font-face {
	font-family: "Robot";
	src: url("../Fonts/Robot.ttf");
}
}


.Flow {
	font-family:"Flow";
	font-size:200%;
}



.Robot {
	font-family:"Robot";
}


.Slick {
	font-family:"Slick";
}

.title {
	text-align: center;
	background-color:#2E2E2E;
	color:#FFFFFF;
	position: relative;
	padding: 20px 10px;
	margin: 0 auto;
}

.number{
	font-size:200%;
	display: inline-block;
}
.numberTop{
	font-size:200%;
	display: inline-block;
	word-spacing:1em;
	text-indent:2.0em;
}

.inLine{
	display: inline-block;
}

.firstBoard {
	margin-right:50px;
}

.Boards{
	float:left;
}

.big{
	font-size:400%;
}

.medium{
	font-size:200%;
}