JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    
    <div class="container">
      
      <header>
        
        <h1>Jon Phillips</h1>
        <p>User Interface Designer</p>
        
        <nav class="contact">
          
          <a href="mailto:[email protected]" target="_blank"><p>Contact</p></a>

        </nav>
      
      </header>
      
    </div>

  </body>

CSS

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Global Values */

html{
  font-family: "Arial";
  font-size: 16px;
  line-height: 1.2;
  height: 100%;
}

body{
  background-color: #f9f9f9;
  height: 100%;
  width:100%;
  display:table
}

.container{
  display: block;
  min-width: 240px;
  max-width: 768px;
  width: 100%;
  
  /*----------------------------------------------*/
  /* This is to make sure that the container height is always the same size as the browser. */
  
  min-height: 100px; 
  height: 100%;  
  
  /*----------------------------------------------*/
  margin: 0 auto;
  text-align: center;
  border-style: solid;
}


header{
  border: solid;
  min-height: 100px;
  margin: auto 5%;
}
.container {
  display:table-cell;
  vertical-align:middle
}