JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page-wrap"> 
    <header class="header">        

     <nav class="nav">
       <input type="checkbox" id="toggle" />
      <label for="toggle" class="toggle" data-open="MENU" data-close="Close Menu" onclick></label>
          <ul class="menu">
            <li><a href="#">HOME</a></li>
            <li><a href="#">ABOUT</a></li>
            <li><a href="#">CONTACT</a></li>
          </ul>                 
    </nav>

     </header>

     <article>

         <div><img src="http://placehold.it/300x300"  alt=""/></div>
         <div><img src="images/3.jpg"  alt=""/></div>
         <div><img src="images/3.jpg"  alt=""/></div>
         <div><img src="images/3.jpg"  alt=""/></div>
         <div><img src="images/3.jpg"  alt=""/></div>

     </article>


  <footer class="footer">
  Copyright
  </footer>

</div>

CSS

nav{
    text-align: center;
    
} 
ul.menu {
display: inline-block;
vertical-align: top;
}

.page-wrap {
    width: 100%;
    height: 100%;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}
.header {
    background-color: #00FF00;
    width: auto;
    margin-top: 20px;
    margin-bottom: 20px;
}
body{ -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} }

#toggle, .toggle { display: none; }


/* micro clearfix */
.clearfix:before, .clearfix:after { display: table; content: ""; }
.clearfix:after { clear: both; }
.toggle{ 
    z-index: 2; 
}


/* reset padding and margin where necessary etc. */
ul {
    list-style-type: none;
    margin: 0;
    padding: 0px;
    z-index: 2; 
}

a {
    text-decoration: none;
    font-size:x-larger;

}

/* just some quick demo styles for color whatnot */
nav {
    background: #efefef;
    color: white;
    z-index: 2;
}

nav ul ul {
    background: #efefef;
    z-index: 2; 
    width:150px;
}

nav ul ul ul {
    background: #efefef;
    z-index: 2; 
}

nav a  {
    color: white;
    white-space:nowrap;

}

nav a:hover  {
    background: ##bbeecc;

}

/* important functional styles */
nav > ul:after {
    /* clear the float */
    content:'';
    clear:both;
    display: block;
}

nav li  {
    /* for the topmost level we want them to float.  will be overridden */
    float:left;
    font-size: large;

}

nav li a {
    /* always apply padding and display block to the a.  better user experience. */
    display:block;
    padding: 10px;
    font-size: large;

}

nav li ul li {
    /* overridden floating here */
    float: none;
    font-size: large;

}

/* here is where all the positioning takes place */
nav li {
    position:relative;
}

nav li ul {
    position:absolute;
    left: 0; /* for top most level lets align to the left */
    top: 100%; /* and have it at the bottom of the parent */
    display:none; /* hide initialy */
}

nav li...