JSFiddle - React, Tailwind, and code Playground

HTML

<label for=checkme class=menu-button>
<div class="responsive-icon">
Trigger
</div>
</label>
    <input id=checkme type=checkbox hidden>

<div class="menu">
<div class="container">
<ul>
<li>
<label for=checkme class=close-button>
<strong>X</strong></a>
</label>
<input id=checkme type=checkbox hidden></label>
</li>
<li><a href="#home" >Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#work">Portfolio</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>

CSS

.menu {
	opacity:0;
	position:fixed;
	bottom:0;
	left:0;
	background:#222;
	padding:20px 0 20px 0;
	margin:0 auto;
	width:100%;
	z-index:999;
	text-transform:uppercase;
	text-align:center;
	font-size:20px;
	-webkit-transition: opacity 0.5s ease-in;
    -moz-transition: opacity 0.5s ease-in;
    -o-transition: opacity 0.5s ease-in;
    -ms-transition: opacity 0.5s ease-in;
    transition: opacity 0.5s ease-in;
}

.close-button {
	position:absolute;
	right:20px;
}

.menu strong {
	color:#258ace;
	font-size:20px;
}

.menu a {
	color:#999;
	font-weight:300;
	-webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.menu a:hover {
	color:#258ace;
	font-weight:300;
	text-decoration:none;
}

input:checked ~ .menu {
	opacity:1;
	display:inline-block;
	position:fixed;
	bottom:0;
	left:0;
	background:#222;
	padding:20px 0 20px 0;
	margin:0 auto;
	width:100%;
	z-index:999;
	text-transform:uppercase;
	text-align:center;
	font-size:20px;
	-webkit-transition: opacity 0.5s ease-in;
    -moz-transition: opacity 0.5s ease-in;
    -o-transition: opacity 0.5s ease-in;
    -ms-transition: opacity 0.5s ease-in;
    transition: opacity 0.5s ease-in;
}

input:checked ~ .menu a {
	opacity:1;
	display:inline-block;
}


.menu-button {
	position:fixed;
	top:20px;
	z-index:999;
	width:100%;
	text-align:center;
}

.menu ul {
	list-style:none;
	display:inline;
	margin:0;
}

.menu li {
	list-style:none;
	display:inline;
	margin:0;
	margin: 0 5px 0 5px;
}