JSFiddle - React, Tailwind, and code Playground

by ray davidson

HTML

<title>Memory Game</title>
	<link rel="stylesheet" type="text/css" href="css/main.css" >

<body>

<nav class="clearfix">
	<a href="#">instructions</a>
	<a href="#">games</a>
</nav>

<h1>Memory Game</h1>
<h2>Instructions</h2>



<h3>My game is fun to play, you will want to play it again and again. My game is fun because it's easy to play. This game is awesome because of how its built.</h3>

<p>Concentration, also known as Match Match, Memory, Pelmanism, Shinkei-suijaku, Pexeso or simply Pairs, is a card game in which all of the cards are laid face down on a surface and two cards are flipped face up over each turn. The object of the game is to turn over pairs of matching cards.</p>

<hr>

<div class="board">
	<div class="card"></div>
	<div class="card"></div>
	<div class="card"></div>
	<div class="card"></div>
</div>

<footer>
	<p>Created with <img src="images/heart.png" width="10px"> by <span class="name">razor</span></p>
</footer>

CSS

h1 {
	color: rgb(2, 132, 130);
	text-align: center;
}

h2 {
	color: #ffd700;
	text-align: center;
}

h3 {
	text-align: center;
}

p {
	text-align: center;
}

.board {
	height: 80%;
	width: 50%;
	display: inline-block;
	border: 3px solid black;
	float: left;
	margin: 8%;

}


.card {
	height: 200px;
	width: 150px;
	border: 1px solid black;
	background-color: yellow;
	border-radius: 10px;
	float: left;
}


.name {
	color: #ff0000;
}

nav {
	text-decoration: none;
	background-color: #808080;
}

a {
	text-decoration: none;
	background-color:  #ffbf00;
	color: white;
	padding: 35px;
	display: block;
	float: left;
}

a:hover {
	background-color:  #ee5f3c;
}


.clearfix:after {
        visibility: hidden;
        display: block;
        content: " ";
        clear: both;
        height: 0;
        font-size: 0;
      }
 footer {
 	text-align: center;
 	float: left;
 }