JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="dropDown">
                <li><a href="http://www.google.com" class="mainButton">Drop down</a>
                    <ul id="innerList">
                        <li><a href="">Link 1</a></li>
                        <li><a href="">Link 2</a></li>
                        <li><a href="">Link 3</a></li>
                        <li><a href="">Link 4</a></li>
                        <li><a href="">Link 5</a></li>
                    </ul>
                </li>
            </ul>

CSS

/* Navigation Dropdown */
    ul.dropDown{
        float: right;
        padding: 20px;
        position: relative;
        z-index: 1200;
    }
    
    ul.dropDown a{
        color: #fff;
    }
    
    ul.dropDown li{
        position: relative;
    }
    
    ul.dropDown a.mainButton{
        background: #dedede;
        padding: 7px 15px;
        color: #000;
        display: inline-block;
    }
    
    ul#innerList{
        background: #f00;
        position: absolute;
        top: 32px;
        right: 0;
        padding: 5px;
    }
    
        ul#innerList li{
            border-top: 1px solid #f2f2f2;
        }
    
        ul#innerList li a{
            
            padding: 3px 10px;
            width: 100px;
            text-align: right;
            display: inline-block;
            background: #343434;
        }
        
            ul#innerList li:first-child{
                border-top: 0;
            }
        
            ul#innerList li a:hover{
                background: #dedede;
            }

JavaScript

var innerList = '#innerList';

    $(innerList).hide();

    $('a.mainButton').click(function(e) {
        $(innerList).fadeIn('slow');
        e.stopPropagation();
    });
    $(document).click(function(e){
        $(innerList).fadeOut('slow');
    });