JSFiddle - React, Tailwind, and code Playground

HTML

<div id="dropdown-container">
    <div id="dropdown">PRODUCT CATALOGUE
        <span class="down-arrow-icon">><span>
    </div>
    <ul id="dropdown-list">
        <li><a href="#">one</a></li>
        <li><a href="#">two</a></li>
        <li><a href="#">three</a></li>
        <li><a href="#">four</a></li>
    </ul>
</div>

CSS

#dropdown-container{
    float: left;
    font-family: Palatino Linotype;
}
#dropdown{
    padding:5px;
    cursor:pointer;
    font-size: 15px;
    border: 1px solid rgb(169, 169, 169);
    -moz-appearance: none;
    -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #2961c1 inset;
    box-shadow: 0 3px 0 #ccc, 0 -1px purple inset;
}
.down-arrow-icon{    
    padding-left: 5px;
    /*place img of down arrow here*/
}
#dropdown-list{
    display:none;
    width: 100%; 
    padding:0px;
    margin:0px;
    border: 1px solid rgb(169,169,169);
}
#dropdown-container:hover ul#dropdown-list{
    display:block;
}
#dropdown-container ul{
    padding:0px;
    list-style: none;
}
#dropdown-container ul li{
    width: 100%;
}
#dropdown-container ul li:hover{
    background-color: lightblue;
    cursor:pointer;
}
#dropdown-container ul li a{  
    padding-left: 10px;
    text-decoration:none;
    color: black;
}