JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kiddermintser Electronic Recycling</title>
<link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
<div class="wrapper">
<h1>Site Title</h1>
<nav>
<a href="#">Home</a>
<a href="#">Home</a>
<a href="#">Home</a>
<a href="#">Home</a>
<a href="#">Home</a>
<a href="#">Home</a>
</nav>
<h2>hello world</h2>
</div>
</body>
</html>
CSS
.wrapper {
margin: 10px auto;
width: 90%;
max-width: 980px;
background-color: yellow;
overflow: auto;
}
nav {
background-color: #222;
padding: 0;
margin: 10px 0;
}
nav a { color: #F9F9F9; display: block; padding: 10px; }
nav a:visited { color: #f9f9f9; }
nav a:hover { text-decoration: none; background: #27B3CF; }
nav a:active { position: relative; top: 0; }
a {
outline: 0;
text-decoration: none;
}
h1 {
font-family: 'Droid Serif', serif;
line-height: 75px;
padding: 10px;
font-size: 90px;
}