JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="navigation">
    <li class="nav-item"><a href="#">Home</a></li>
    <li class="nav-item"><a href="#">Portfolio</a></li>
    <li class="nav-item"><a href="#">About</a></li>
    <li class="nav-item"><a href="#">Blog</a></li>
    <li class="nav-item"><a href="#">Contact</a></li>
</ul>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />

<div class="site-wrap">
	<h6 class="v">lalala</h6>
	<label class="svg" for="nav-trigger">
        click to toggle
	</label> 
	<div class="logo"></div>
</div>

CSS

*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}
html, body {
 height: 100%; 
 width: 100%;
 overflow-x: hidden;
}


.navigation {
  /* critical sizing and position styles */
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  background-color: green;
  
  /* non-critical appearance styles */
  list-style: none;
}

.site-wrap {
  min-height: 100%;
  min-width: 100%;
  background-color: black;
  position: relative;
  top: 0;
  bottom: 100%;
  left: 0;
  z-index: 1;
  padding-top: 50px;
}

/* Nav Trigger */
.nav-trigger {
  /* critical styles - hide the checkbox input */
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

.logo {
  background-image: url(../assets/logo.svg);
  background-repeat: no-repeat;
  margin: 0 auto;
  width: calc(128px * 2);
  height: calc(96px * 2);
  background-size: contain;
  -webkit-animation: rot 60s infinite linear;
}

@-webkit-keyframes rot{
  from {-webkit-transform: rotate(0deg);}
  to {-webkit-transform: rotate(359deg);}
  } 

.v {
  color: rgb(0, 143, 0);
  position: absolute;
  right: 0; top: 0;
  margin: 10px 14px 0 0;
  z-index: 2;
}
.svg[for="nav-trigger"] {
  position: absolute;
   color:white;
  height: 13px;
  width: 16px;
  background-image: url(../assets/menu.svg);
  background-repeat: no-repeat;
  right: 0; top: 0;
  margin: 30px 30px 0 0;
  z-index: 2;
  cursor: pointer;
}
/* Make the Magic Happen */
.nav-trigger + .site-wrap {
  transition: all 0.2s linear;
}
.nav-trigger:checked ~ .site-wrap {
  top: 80%;
}