JSFiddle - React, Tailwind, and code Playground

by bjorn1990

HTML

<div id="box1" class="glow1"></div>
<hr>
<div id="box2" class="nav">
  <nav>
    <ul>
      <li> <a href="#"> Homepage </a> </li>
      <li> <a href="#"> Producten </a> </li>
      <li> <a href="#"> Portfolio </a> </li>
      <li> <a href="#"> About Us </a> </li>
      <li> <a href="#"> Contact </a> </li>
    </ul>
  </nav>
</div>
<hr>
<div id="box3" class="footer"></div>

CSS

@import url('https://fonts.googleapis.com/css?family=Alfa+Slab+One');

body {
  background-image: url("https://static.afbeeldinguploaden.nl/1611/197018/IVTqdHUB.jpg");
  background-size: 10%;
  margin: 0;
}

#box1, #box3 {    
  width: 100%;
  min-height: 300px;
}

.glow1 {
  background: -webkit-linear-gradient(#1a1a1a, #000); /* Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#1a1a1a, #000); /* For Opera 11.6 to 12.0 */
  background: -moz-linear-gradient(#1a1a1a, #000); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#1a1a1a, #0B0B3B); /* Standard syntax */
  opacity: 0.9;
}

.nav {
  background: -webkit-radial-gradient(#1a1a1a, #000); /* Safari 5.1 to 6.0 */
  background: -o-radial-gradient(#1a1a1a, #000); /* For Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(#1a1a1a, #000); /* For Firefox 3.6 to 15 */
  background: radial-gradient(#1a1a1a, #000); /* Standard syntax */
  opacity: 0.9;
}

/* menu */
.nav ul {
  display: flex;
  margin: 0; 
  padding: 0;
  list-style: none;
}
.nav li {
  flex: 1;
  padding: 0 25px;
}

.nav a {
  display: block;
  text-decoration: none;
  font-size: 20px;
  padding: 15px;
  color: limegreen;
  text-align: center;
  font-family: 'Alfa Slab One', cursive;
}
.nav a:hover{background-color: #eee; color: #1a1a1a;}
/* End menu */

.footer {
  background: -webkit-radial-gradient(#1a1a1a, #000); /* Safari 5.1 to 6.0 */
  background: -o-radial-gradient(#1a1a1a, #000); /* For Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(#1a1a1a, #000); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#0B0B3B, #1a1a1a); /* Standard syntax */
  opacity: 0.9;
}


hr { 
    display: block;
    color: gold;
    margin: 0;
}