JSFiddle - React, Tailwind, and code Playground

by olgis

HTML

<nav>      
                      <ul class="dropdown-holder">  
                        <li><a href="#" class="main-link">Top Link</a>
                                <div class="arrow">
                                    Hello this is me :D</div>
                                        <div class="dropdown-holder-inner">
                                            <ul class="dropdown">
                                                <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>                            
                            </ul>
                </nav>

CSS

body { background:#F5F5F5;}
*{ padding:0; margin:0; outline:0;}
li { list-style-type:none;}
/*[HACKS]*/
..clear{clear:both;padding:0;margin:0;}
.clearfix{display:inline-block;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:block;}
a { text-decoration:none;}

#nav{
    width: 50px
    z-index: 50;
    margin: 30px 0 auto;
}

    a.main-link:link, a.main-link:visited{
        text-transform: uppercase;
        font-weight: bold;
        color: #000;
        letter-spacing: 1px;
        display:block;
        margin:    0;
        padding: 0;
    }
    
    
        nav ul {
            list-style-type: none;
            padding: 0 0px;
            margin: 0;
        }
        
        nav ul li{
        
            display:block;
            float: left;
            margin-right: 50px;
            /*position: relative;*/
            z-index: 50;
            cursor: pointer;
            height: auto;
        }
            
        .dropdown-holder{
            display: none;
        }
        
        #nav ul li:hover ul{
            display: block;
        }
    

        #nav ul li:last-child{
            margin-right: 0px;
        }
        
        
        nav ul li ul.dropdown-holder{
            margin: 0;
            padding: 0;
            position: absolute;
            top: -2px;
            left: 0;
            z-index: 50;
            cursor: pointer;
        }

            
nav ul li ul.dropdown-holder li {left:0;}
.arrow{
                background:#BBB top center no-repeat;
                z-index: 55;
                height: 9px;
                position: absolute;
                top: 20px;
                left: -50px;
                min-width: 160px;
                width: 100%;
                margin:    0;
                padding: 0;
            }
            
            
            
            nav ul li ul.dropdown-holder li .dropdown-holder-inner{
                margin-top: 40px;
    ...