JSFiddle - React, Tailwind, and code Playground

HTML

<header class="main-header">
    <div class="container">
     <h1 class="title">Title1</h1>

     <ul class="main-nav">
        <li><a href="#">HOME</a></li>
        <li><a href="#">PORTFOLIO</a></li>
        <li><a href="#">CONTACT</a></li>
    </ul>

    <img src="images/responsive-layout-profile.png" class="profile-icon">

    <p>Text field</p>

   </div>
 </header>
    <div class="main-content">
       <h2 class="title-two">PORTFOLIO</h2>
    </div>

CSS

body {
    background-color: #FAFAFA;
    font-family: helvetica;
    margin: 0;
    padding: 0;
}

ul.main-nav {
  padding:0;
}

.title {
    text-align: center;
    font-size: 1.5em;
    margin-top: 30px;
    margin-bottom: 30px;
    color: #626262;
}

/*** NAVIGATION ***/

.main-nav li {
    list-style: none;
    float:left;
     width: 32.66%;
     margin-right:1%;
}

ul li:last-child { margin-right:0;}
.main-nav a {
    text-decoration: none;
    background-color: white;
    font-weight: 600;
    color: #626262;
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: .75em;
    display:block;
   
    

    margin-top: 5px;
    text-align: center;

}

.profile-icon {
    height: 125px;
    width: 200px;


}





 /******  PORTFOLIO    ********/

.main-content {
    background-color: #FFFFFF;
}

@media only screen and (max-width: 768px) {
  
  .main-nav li { width:100%;margin:0}
  }
}