JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="container">
      <div id="header">
      
      </div><!-- #header End -->
      <div class="inner">
        <div id="right-column">
          <h2><a href="">Main link</h2>
          <u1>
            <li><a href="">link1</a></li>
            <li><a href="">link2</a></li>
            <li><a href="">link3</a></li>
            <li><a href="">link4</a></li>
          </u1>
        </div><!-- #right-column End -->
        <div id="main">
        
        </div><!-- #main End -->
      </div> <!-- .inner End -->
    </div> <!-- #Container End -->
    <div id="footer">
    
    </div> <!-- #footer End -->
  </body>

CSS

#container { 
  /* padding and margin */
  padding: 0px;
  margin: 0px;
  border: 0px;
  
  
	overflow: hidden; 
	max-width: 50000px; 
	min-width: 500px; 
}

#container .inner { 
  /* padding and margin */
  padding: 0px;
  margin: 0px;
  border: 0px;
  
  /* Dimensions */
  min-width:700px;
}

#right-column {
  /* padding and margin */
  padding: 0px;
  margin: 0px;
	border-left: 5px solid #E3E3E3;
  

  float: right;
  width: 200px;
  height: 1000px;
  background: green;

}
#right-column h2 {
  text-align: center;

}
#right-column u1 {
  /* padding and margin */
  padding: 0px;
  margin: 0px;
  border: 0px;
}
#right-column li {
  /* padding and margin */
  padding: 0px;
  margin: 0px;
  border: 0px;
  
  text-align: center;
 	list-style-type: none;
}

#main {
  /* padding and margin */
  padding: 0px;
  margin: 0px;
  border: 0px;
  
  /* Dimensions */

  min-width: 500px;
  height: 1000px;
 
  background: red;
}

#header {
  /* padding and margin */
  padding: 0px;
  margin: 0px;
  border: 0px;
  
  /* Dimensions */
  width: 100%;
  height: 300px;
  
  /* Colors */
  background-color: #EEEEEE;
}

#footer {
  /* padding and margin */
  padding: 0px;
  margin: 0px;
  border: 0px;
    
  height: 300px;
}