JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html> 
<html> 
	<head> 
		<meta charset="UTF-8"> 
		<title> Title of the document </title>  
		<link rel="stylesheet" href="css/style.css"> 
	</head> 
<body> 

 <header> 
 	<div class="logo"> 
 	 <img src="http://inddc.in/webroot/assets/img/sample/shortcode/logo/1.png" alt="image-name"> 
 	</div> 
 
 <button class="toggle-btn">Open</button>
 	<nav> 
 	 <ul> 
 	   <li><a href="">Home</a></li>  
	   <li><a href="">About us</a>
       <ul class="sub-menu">
         <li><a href="">About 1</a></li>
         <li><a href="">About 2</a></li>
         <li><a href="">About 3</a></li>
       </ul>
    </li>
	   <li><a href="">Contacts</a></li>  
 	 </ul> 
 	</nav> 
 </header> 
 
 <section> 
	<h3>Hello world</h3> 
  <img src="https://iso.500px.com/wp-content/uploads/2016/11/stock-photo-159533631-1500x1000.jpg" alt="my-photo">
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu dignissim eros. Proin mollis suscipit tortor faucibus commodo. Aenean convallis diam in nisi elementum consectetur. Sed nisi leo, mollis quis nisi nec, consectetur molestie risus. Fusce mauris nunc, dapibus a dui in, commodo rhoncus elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis mollis nisl condimentum tellus iaculis, eu bibendum ex fringilla. Duis nunc sapien, hendrerit quis imperdiet a, mattis in elit. Curabitur sit amet neque a nibh elementum hendrerit eu quis est. Duis ut luctus velit.</p> 
 </section> 
 
 <footer> 
 	<p>© 2018 All Rights Reserved</p> 
 </footer> 

</body> 
</html>

CSS

body{
  margin: 0;
  padding: 0;
  max-width:700px;
  margin:0 auto;
}

header{
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
}
header:after{
  content: '';
  overflow: hidden;
  display: block;
  width: 100%;
}

header .logo{
  float:left;
}

header .logo img{
  max-width: 150px;
}

header nav{
  float: right;
}

header .sub-menu{
  display: none;
  padding: 0;
  left: 0;
  top: 46px;
  background-color: #f3f3f3;
  position: absolute;
}

header .sub-menu li{
  border-bottom: 1px solid #ccc;
  width: 100%;
  padding: 0;
}

header nav li{
  display: inline-block;
  padding-right: 10px;
  position: relative;
}

header nav li a{
    padding: 14px 5px;
    display: block;
    color: #000;
    text-decoration: none;
    transition: 0.3s;
}

header nav li a:hover{
  background-color: #f3f3f3;
}

header nav li:hover .sub-menu{
  display: block;
}

section h3{
  font-size: 35px;
  text-align: center;
  text-transform: uppercase;
}

section p {
  font-size: 20px;
}

section img{
  max-width: 100%;
}

footer{
  padding:30px 10px;
  background-color: #efefef;
}

.toggle-btn{
  display: none;
}

@media only screen and (max-width: 768px) {
 
 .toggle-btn{
    display: block;
    float: right;
    margin: 25px;
    border: none;
    padding: 7px 20px;
    text-transform: uppercase;
    font-size: 12px;
    cursor: pointer;
}
 header nav{
   display:none;
   position: absolute;
   top: 80px;
   background: #f5f5f5;
   width: 100%;
 }
 header nav li{
   display: block;
 }
 
  section{
    padding: 0 15px;
  }

   section h3{
   		font-size: 25px;
   }
   section p{
   		font-size: 15px;
   }
}

JavaScript

$(function(){
  var button = $('button');
  var nav = $('nav');
  
  $('button').on('click', function(){
  	nav.toggle();
  });
});