JSFiddle - React, Tailwind, and code Playground

by Rоmаn Chuгgаnоv

HTML

<ul class="menu">
    <li><a href="#" >item1</a></li>
    <li><a href="#">item2</a></li>
    <li><a href="#">item3</a>
        <ul>
            <li><a href="#">subitem1</a></li>
            <li><a href="#">subitem2</a></li>
            <li><a href="#">subitem3</a>
                <ul>
                    <li><a href="#">subsubitem1</a></li>
                    <li><a href="#">subsubitem2</a></li>
                </ul>
            </li>
            <li><a href="#">subitem4</a></li>
            <li><a href="#">subitem5</a></li>
        </ul>
    </li>
    <li><a href="#">item4</a></li>
    <li><a href="#">item5</a></li>
</ul>

CSS

.menu {
        border:none;
        border:0px;
        margin:0px;
        padding:0px;
        font: 67.5%"Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
        font-size:14px;
        font-weight:bold;
    }
    
    .menu ul {
        background:#333333;
        height:35px;
        list-style:none;
        margin:0;
        padding:0;
    }
    
    .menu li {
        float:left;
        padding:0px;
    }
    
    .menu li a {
        background:#333333 url("http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsZSeQYKQI/AAAAAAAAAGU/0AgHYW2zktQ/s1600/seperator.gif") bottom right no-repeat;
        color:#cccccc;
        display:block;
        font-weight:normal;
        line-height:35px;
        margin:0px;
        padding:0px 25px;
        text-align:center;
        text-decoration:none;
    }
    
    .menu li a:hover, .menu ul li:hover a {
        background: #2580a2 url("http://3.bp.blogspot.com/_jM8-wHc3NKY/TQsZNT36uyI/AAAAAAAAAGM/F8t08m7-5tw/s1600/hover.gif") bottom center no-repeat;
        color:#FFFFFF;
        text-decoration:none;
    }
    
    .menu li ul {
        background:#333333;
        display:none;
        height:auto;
        padding:0px;
        margin:0px;
        border:0px;
        position:absolute;
        width:225px;
        z-index:200;
        /*top:1em;
        /*left:0;*/
    }
    
    .menu li:hover ul {
        display:block;
    }
    
    .menu li li {
        background:url('http://1.bp.blogspot.com/_jM8-wHc3NKY/TQsZUcZYwkI/AAAAAAAAAGY/zNSlkfCsai8/s1600/sub_sep.gif') bottom left no-repeat;
        display:block;
        float:none;
        margin:0px;
        padding:0px;
        width:225px;
    }
    
    .menu li:hover li a {
        background:none;
    }
    
    .menu li ul a {
        display:block;
        height:35px;
        font-size:12px;
        font-style:normal;
        margin:0px;
        padding:0px 10px 0px 15px;
        text-align:left;
   ...