JSFiddle - React, Tailwind, and code Playground

HTML

<div id="site_switcher">
                <ul>
                    <li class="menu_li" role="menu">
                        <a href="#" tabindex="1" class="arrow"></a>
                        <a href="#" tabindex="1" class="arrow_close"></a>
                        <div class="sub_menu">
                            <div class="menu_arrow"></div>
                            <ul>
                                <li><a href="http://htmlbook.ru/" target="_self" >Photoshop</a></li>
                                <li><a href="http://forum.htmlbook.ru/" target="_self" >Веб-дизайн</a></li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>

CSS

#site_switcher ul { margin: 0; padding: 0;}
#site_switcher li { margin: 0; padding: 0;}
#site_switcher a { margin: 0; padding: 0;}
#site_switcher ul {list-style: none;}
#site_switcher a {text-decoration: none;}
#site_switcher {
    display: inline-block;
    padding: 0px 0px;
    margin: 30px 0 0 200px;
}

#site_switcher > ul > li {
    float: left;
    position: relative;
    height: 16px;
}

#site_switcher > ul > li > a {
    color: #000;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 70px;
    padding: 0px 9px;
}

#site_switcher > ul > li > a:hover {
    color: #fff;
}

.arrow {
    height: 16px; 
    width: 16px;
    background: url(http://ps.cloverdesign.ru/wp-content/themes/cd/img/arrow.png) no-repeat;
    -webkit-touch-callout: none;
}

.arrow:hover {
    cursor: pointer;
}

.arrow:focus {
    outline: 0;
}

.arrow::-moz-focus-inner {
    border: none;
}

.arrow_close {
    display: none;
    height: 16px; 
    width: 16px;
    background: url(http://ps.cloverdesign.ru/wp-content/themes/cd/img/arrow.png) no-repeat;
    position: absolute;
    top: 24px;
    padding: 0;
    margin: 0;
    -webkit-touch-callout: none;
}

.arrow_close:hover {
    cursor: pointer;
}

.arrow_close:focus {
    outline: 0;
}

.arrow_close::-moz-focus-inner {
    border: none;
}

#site_switcher > ul > li > div.sub_menu ul {
    opacity: 0;
    visibility: hidden;
    padding: 7px 0 5px 0;
    background-image: linear-gradient(bottom, rgb(211,215,207) 0%, rgb(234,234,231) 100%);
    background-image: -o-linear-gradient(bottom, rgb(211,215,207) 0%, rgb(234,234,231) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(211,215,207) 0%, rgb(234,234,231) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(211,215,207) 0%, rgb(234,234,231) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(211,215,207) 0%, rgb(234,234,231) 100%);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
...