JSFiddle - React, Tailwind, and code Playground

by Joseph Perez

HTML

<header>
  <span>Blood Bowl Replay Manager</span>
  
  <nav>
      <ul>
      <li><a href="">Home/My profile</a></li>
      <li><a href="">Teams</a></li>
      <li><a href="">Leagues</a></li>
      <li><a href="">Races</a></li>
      <li><a href="">Skills</a></li>
      <li><a href="">Stars</a></li>
      <li><a href="">Top 100</a></li>
      <li><a href="">Contact</a></li>
    </ul>
  
  </nav>
</header>

<body>
  <div class="content-container">
  <p class="introductory-paragraph">
    <span>Welcome to BBRM</span>
    <br>Insert description of how great this site is
  </p>
  
  <div class="advertisement" id="">
  
  </div>
  

    <div class="content">
    
    </div>
  </div>
  
</body>

CSS

header{
    background: linear-gradient(#151551,  #2f2fb6);
    padding: 0px;
    margin: 0px;
    overflow-y: hidden;
}

header span{
  color: white;
  display: block;
  font-size: 24px;
  padding: 20px 0;
  text-align: center;
}

header a{
      border-bottom:1px solid #000;
    text-decoration:none;
  user-select: none;
  cursor: pointer;
}

header a:visited, header a:focus{
  color: white;
  text-decoration:none;
}

header ul{
  background-color: black;
  float: center;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

header li{
  background: linear-gradient(#1a53ff,  #2f2fb6);
  border-radius: 5px;
  color: white;
  float: left;
  margin-left: 5px;
  padding: 5px 10px; 
}

body{
  marign: 0px;
  padding: 0px;
}

.content-container{
  display: inline-block;
  margin-left: 20%;
  width: 60%;
}

.content-container .introductory-paragraph{
  color: black;
}

.introductory-paragraph span{
  font-size: 150%;
}

.content{
  background-color: #404040;
  border: 1px solid #3333cc;
  border-radius: 5px;
  min-height: 400px;
  width: 100%;
}