JSFiddle - React, Tailwind, and code Playground

by twong17

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Movie Review Site</title>
    <link rel="stylesheet" type="text/css" href="Movie%20Review%20Site.css">
  </head>

  <body>
    <header id="main-header">
      <div class="container">
        <h1>Movie Review</h1>
      </div>
    </header>
    <div class="topnav">
      <a href="#">Home</a>
      <a href="#">John Wick 3</a>
      <a href="#">Avengers</a>
      <a href="#">Aladdin</a>
      <a href="#">Rocketman</a>
    </div>

    
    
    <div class = "container">
      <section id = "main">
      </section>
    
    </div>
    
  </body>

</html>

CSS

CSS

#main-header
{
  background-color: #F1F1F1;
  text-align: center;
  padding: 20px;
}

.topnav 
{
  overflow: hidden;
  background-color: #333;
}
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}