JSFiddle - React, Tailwind, and code Playground

by anarmus

HTML

<input type="checkbox" name="menu_push" id="1"/>
<label for="1"><i class="fa fa-search"></i></label>
<div class="menu"></div>

CSS

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);
.menu {
  height:0;
  width:100%;
  background-color:#009933;
  transition: height 0.5s;
}
input {
display: none;
}
label {
  position:absolute;
  top:15px;
  right:20px;
  font-size: 25px;
  transition: color 0.5s;
}
input:checked ~ .menu {
height:100px;
}
input:checked + label {
  color: #fff;
}