JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav">    
    <ul class="clearfix sf-menu">    
        <li class="dropdown-link"><a href="#" class="main-link">Top Link</a>
            <div class="clearfix dropdown-holder">
                <div class="arrow"></div>
                <ul class="dropdown clearfix">
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Linky</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li class="last-child"><a href="#">Link</a></li>
                </ul>
            </div>
        </li>
        <li class="dropdown-link"><a href="#" class="main-link">Top Link 02</a>
            <div class="clearfix dropdown-holder">
                <div class="arrow"></div>
                <ul class="dropdown clearfix">
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Linky</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li class="last-child"><a href="#">Link</a></li>
                </ul>
            </div>
        </li>
        <li class="dropdown-link"><a href="#" class="main-link">Top Link 03</a></li>
    </ul>
</div>

CSS

body { background:#F5F5F5;}
*{ padding:0; margin:0; outline:0;}
li { list-style-type:none;}
a { text-decoration:none;}
#nav { background:#6B6C6E; width:300px; margin:30px auto 0;}
/*--------[Navigation css]--------*/
.sf-menu li{float:left; font:12px/1em 'arial'; position:relative; padding:0 0 5px;}
.sf-menu li a{float:left;padding:12px 10px 5px;color:#fff; text-transform:uppercase;}
.sf-menu .dropdown-holder{
    position:absolute;
    left:-999em;
    width:218px; 
    top:93%;
}
.sf-menu li:hover .dropdown-holder,
.sf-menu li.sfhover .dropdown-holder {left:-999em;}

.sf-menu li:hover .dropdown-holder,
.sf-menu li.sfhover .dropdown-holder {left:0;}
.arrow { background:url(http://www.powmac.com/wp-content/themes/powmac2012-v2/skins/default/tcformbg.png) no-repeat left top; width:32px; height:8px; position:relative; z-index:2; left:10px;}
.dropdown {
    box-shadow:0 0 5px #bec2c8;
    background:#fff;
    height:100%;
    position:relative;
    z-index:1;
    padding:10px 10px 5px;
}
.sf-menu .dropdown li{text-transform:capitalize; border-bottom:1px solid #ccc;}
.sf-menu .dropdown li.last-child { border:0;}
.sf-menu .dropdown a{
    float:left;
    padding:5px 0;
    width:198px;
    color:#333;
}