JSFiddle - React, Tailwind, and code Playground

by DeadByElpy

HTML

<div class="wrap">
  <div>
              <label class="mobile_menu" for="mobile_menu">
              <span>Menu</span>
              </label>
              <input id="mobile_menu" type="checkbox">
              <ul class="nav">
              <li><a href="#"><i class="icon-home icon-large"></i></a></li>
              <li class="dropdown"><a href="#">Envato</a>
                <ul>
                  <li><a href="#">Video</a></li>
                  <li><a href="#">Audio</a></li>
                  <li><a href="#">Design</a></li>
                  <li class="dropdown"><a href="#">Web</a>     
                    <ul>
                      <li><a href="#">HTML</a></li>
                      <li><a href="#">CSS</a></li>
                      <li class="dropdown"><a href="#">Templates</a>
                        <ul>
                          <li><a href="#">Wordpress</a></li>
                          <li><a href="#">Joomla</a></li>
                          <li><a href="#">Drupal</a></li>
                        </ul>
                      </li>
                                        <li><a href="#">Audio</a></li>
                  <li><a href="#">Design</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Audio</a></li>
                  <li><a href="#">Design</a></li>
                </ul>
              </li>
              <li class="dropdown"><a href="#">Tutorials</a>
              <div class="coldrop">
                <div class="column">
                  <h3>+ PSDtuts</h3>
                  <ul>
                    <li><a href="#">Tutorials</a></li>
                    <li><a href="#">Articles</a></li>
                    <li><a href="#">Tips</a></li>
                    <li><a href="#">Videos</a></li>
                  </ul>
                </div>
                <div class="column">
                  <h3>+ NETtuts</h3>
                  <ul>
                    <li><a href="#">Tutorials</a></li>
                   ...

CSS

@import url('font_awesome/css/font-awesome.min.css');

/* This is just a demo */


/* Basic Style */
body {
	font-family: 'Open Sans', sans-serif;
	color: #252525;
	position: relative;
	padding:0;
	margin: 0;
}

label.mobile_menu span {
	margin-left: 10px;
	color: white;
	display: none;
}

.nav {
	/* General Font */
	font-family: 'Open Sans', sans-serif; 
	font-weight: 400; /* 400 thinner */
	font-size: 13px;
	line-height: 13px;

	/* General Shape */
	position: relative;
	padding: 0 0 0 4px; /* Fix for inline-block spacing*/
	margin: 0;

	/* Genral Styling */
    background-color: #212121;
}

/* Reset Links */
.nav a, .nav a:link, .nav a:visited, .nav a:hover, .nav a:focus, span {
	color: #fff;
	text-decoration: none;
}

/* Main element of the naviagtion */
.nav > li {
	display: inline-block;
	text-align: center;
	margin-left: -4px; /* For the inline-block spacing */
}

/* Search */

/* Search reset */
.nav > li.search {
	border:none;
	-webkit-box-shadow:  none;
    box-shadow:  none;
    float: right;
    padding: 11px 6px;
    position: relative;
}

.nav > li.search:hover {
	background-color: transparent;
}

/* Search form */
.nav > li  input {
	padding: 7px 6px 6px 38px;
	margin: 0 5px;
	color:#fff;
	border:none;
	background-color: #212121;
	font-size: 14px;
	border: 1px solid #6dbfe7;
}

.nav > li  input:focus {
	outline: none;
	border-color: white;
}

.nav > li.search i {
	position: absolute;
	left: 20px;
	top:20px;
	color: #a7daf3;
	font-size: 16px;
}

/* Link Style */
.nav > li > a {
	padding:20px 18px;
	display: block;
}

.nav > li:hover > a{
	color: #fff;
}

.nav > li:hover {
	background-color: #0078b3;
}


/* Simple multilevel dropdown */
.nav > li > ul {
	opacity: 0;
	visibility: hidden;
	position: absolute;
	list-style: none;
	top:53px;
	background-color: #287cb5;
	width: 200px;
	text-align: left;
	margin-top:30px;
	padding: 0px;
	z-index: 99;
}

/* First level appear */
.nav > li:hover > ul {
	opacity: 1;
	visibility: visible;
	margin-top: 0px;
}

/*...