JSFiddle - React, Tailwind, and code Playground

by Jonas Schubert Erlandsson

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<div id="navbar">
<ul id="menu-main-menu" class="nav navbar-nav">
    <li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-14"><a href="http://localhost/glorys-portfolio/">HOME</a>
    </li>
    <li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-16"><a href="http://localhost/glorys-portfolio/albums/">ALBUMS</a>

        <ul class="sub-menu">
            <li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-50"><a href="http://localhost/glorys-portfolio/albums/places/">Places</a>

            </li>
            <li id="menu-item-57" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-57"><a href="http://localhost/glorys-portfolio/albums/friends-visiting/">Friends Visiting</a>
            </li>
            <li id="menu-item-113" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-113"><a href="http://localhost/glorys-portfolio/albums/milo/">Milo</a>
            </li>
            <li id="menu-item-112" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-112"><a href="http://localhost/glorys-portfolio/albums/families/">Families</a>

            </li>
        </ul>
    </li>
    <li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15"><a href="http://localhost/glorys-portfolio/about/">ABOUT</a>
    </li>
    <li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-12 current_page_item menu-item-17"><a href="http://localhost/glorys-portfolio/contact/">CONTACT</a>
    </li>
</ul>
</div>

CSS

nav.navbar {
    border:none;
    border-top:3px solid #f3c800;
    background-color:rgba(0, 0, 0, 0.8);
}
nav.navbar .container {
    padding:0;
}
#navbar {
    float:right;
    margin-right:15px;
}
#navbar .navbar-nav .menu-item {
    margin-right:17px;
    position:relative;
}
#navbar .navbar-nav .menu-item a {
    color:#000;
    font-weight:bold;
    font-size:13px;
    padding:16px 12px;
}
#navbar .navbar-nav .menu-item a:hover {
    color:#000;
}
#navbar .navbar-nav .menu-item.current_page_item {
    background-color:#f3c800;
}
#navbar .navbar-nav .menu-item.current_page_item a {
    color:#000;
}
#navbar .navbar-nav .menu-item:hover {
    background-color:#f3c800;
}

#navbar .navbar-nav .menu-item .sub-menu {
    position:absolute;
    top:52px;
    left:-40px;
    max-height: 0;
	overflow: hidden;
    
    -webkit-transition: max-height 250ms ease-in-out;
    transition: max-height 250ms ease-in-out;
}
#navbar .navbar-nav .menu-item:hover .sub-menu {
    max-height: 1000px;
}


#navbar .navbar-nav .menu-item .sub-menu.main-fix {
    left:-42px;
}
#navbar .navbar-nav .menu-item .sub-menu.main-fix .menu-item {
    width:221px;
}
#navbar .navbar-nav .menu-item .sub-menu .menu-item {
    list-style-type:none;
    margin-right:0px;
    width:200px;
    border-left:2px solid rgba(20, 20, 20, 0.8);
}
#navbar .navbar-nav .menu-item .sub-menu .menu-item a {
    text-decoration:none;
    color:#fff;
    background-color:rgba(20, 20, 20, 0.8);
    width:100%;
    display:block;
    padding:12px 10px;
    font-weight:normal;
    border-bottom:1px solid #303030;
}
#navbar .navbar-nav .menu-item .sub-menu .menu-item a:hover {
    background-color:rgba(48, 48, 48, 0.8);
    padding-left:9px;
}
#navbar .navbar-nav .menu-item .sub-menu .menu-item.menu-item-has-children >a::after {
    content:'>';
    float:right;
    margin-right:-6px;
}
#navbar .navbar-nav .menu-item .sub-menu .menu-item:hover {
    background:none;
    border-left:3px solid #f3c800;
   ...