JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<a href="http://www.red-team-design.com/animenu-a-responsive-dropdown-navigation-made-with-sass" target="blank">Source</a>, 
<a href="http://www.red-team-design.com/wp-content/uploads/2013/02/animenu-demo.html#" target="blank">Démo</a>
<br>
<br>
  
<nav class="animenu">	
    <input type="checkbox" id="button">
    <label for="button" onclick>Menu</label>
	<ul>
		<li>
			<a href="#">Item 1</a>
			<ul>
				<li><a href="#">Sub Item 1</a></li>
				<li><a href="#">Sub Item 2</a></li>
				<li><a href="#">Sub Item 3</a></li>
			</ul>
		</li>
		<li>
			<a href="#">Item 2</a>
			<ul>
				<li><a href="#">Sub Item 1</a></li>
				<li><a href="#">Sub Item 2</a></li>
				<li><a href="#">Sub Item 3</a></li>
			</ul>
		</li>
		<li>
			<a href="#">Item 3</a>
			<ul>
				<li><a href="#">Sub Item 1</a></li>
				<li><a href="#">Sub Item 2</a></li>
				<li><a href="#">Sub Item 3</a></li>
			</ul>
		</li>
		<li>
			<a href="#">Item 4</a>
			<ul>
				<li><a href="#">Sub Item 1</a></li>
				<li><a href="#">Sub Item 2</a></li>
				<li><a href="#">Sub Item 3</a></li>
			</ul>
		</li>						
	</ul>
</nav>

CSS

body{ background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAB9JREFUeNpiYGBgEPr//z8DCIMBkAEWYIRywIIAAQYAPcIPFz/ScLMAAAAASUVORK5CYII=); }

.animenu > ul:after {
  content: "";
  display: table;
  clear: both;
}

body {
  -webkit-animation: bugfix infinite 1s;
}

@-webkit-keyframes bugfix {
  from {
    padding: 0;
  }

  to {
    padding: 0;
  }
}

.animenu {
  font: bold 13px Arial, Helvetica;
}
.animenu * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.animenu ul {
  margin: 0;
  padding: 0;
  list-style: none;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}
.animenu li {
  position: relative;
}
.animenu li:hover > ul {
  opacity: 1;
  visibility: visible;
  margin: 0;
}
.animenu li:hover > a {
  color: white;
}
.animenu input[type=checkbox] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
.animenu label {
  display: none;
  cursor: pointer;
  user-select: none;
}

.animenu > ul {
  border: 1px solid #040404;
  background-color: #111111;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.2)), color-stop(100%, rgba(255, 255, 255, 0)));
  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
  background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
  background-image: -o-linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
  background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
}
.animenu > ul > li {
  float: left;
  border-right: 1px solid #1e1e1e;
  -webkit-box-shadow: 1px 0 0 #444444;
  -moz-box-shadow: 1px...