JSFiddle - React, Tailwind, and code Playground

HTML

<header class="main_nav green">
    <div class="container">
        <div class="twelve columns">
        <div class="logo"><a href="#">Mohammed Mayat</a></div>
        </div> 
    </div> 
</header>

<div class="container main">
   <div class="row portfolioimage">
       <div class="six columns portfolio">
          <img src="images/delicate%20desserts.png" alt="delicate desserts website">
           
           
       </div>
       <div class="six columns portfolio">
           <a class="image-link" href="images/bfs.png"><img src="images/bfs.png" alt="blackburn furniture store website"></a>
           
       </div>
    
   </div><!--row conatinaire--> 
   
  
   
   <div class="row">
       <div class="six columns portfolio">
           <a class="image-link" href="images/magzinecover1.png"><img src="images/magzinecover1.png" alt="delicate desserts website"></a>
           
           
       </div>
       <div class="six columns portfolio">
           <a class="image-link" href="images/fontpair.png"><img src="images/fontpair.png" alt="blackburn furniture store website"></a>
           
       </div>
    
   </div><!--row conatinaire--> 
   
</div><!-- containeire-->

<div class="row green">
      <div class="container">
       <div class="four columns">
           <img class="avatar" src="images/profile-pic2.jpg">
       </div>
       <div class="eight columns">
           <h2 class="bio">Web Designer/ Front End Web Developer</h2>
           <p class="bio"> Hi I am Web Designer and front end developer based in Blackburn, Lancashire. I am student studying web development BSC Hons at University of Central Lancashire. My approch is to create websites to strengthen your company brand. I believe in clean design, functional user experience and Minimise design. You can view my work on the portfolio section or you can contact me if you have any queries below.</p>
       </div>
   </div><!--row green conatinaire-->
   </div><!-- containeire-->
   
   <footer>
      ...

CSS

/*Table of content--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*general content--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.main{
    padding-top: 3%;
}
.row{
    padding: 2% 0;
}
.green{
    background-color: #7accc8;
}

.portfolioimage{
    margin-bottom: 10px;
}


/*Typography--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
body{
    font-family: 'roboto', sans-serif;
    font-size: 1.5em;
    color: #000;
}
h2{
    font-family: 'lato', serif;
    font-size: 3em;
    margin: 0.67em;
}
h2.bio{
    color: #3f7f7c;
}
p.bio{
    color: #fff;
}

/*header and nav--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
header.main_nav{
    padding: 1% 0;
    display: block;
}
.logo{
    margin: 5% auto;
    text-align: center;
}

.logo a{
    font-size: 3em;
    color: #fff;
    text-decoration: none;
    border: 3px solid #fff;
    text-transform: uppercase;
    padding: 2px 10px 0 10px;
    margin: 0;
}

.logo a:hover{
    background-color: #fff;
    color: #7accc8;
}
/*image and...