JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="unstyled">
    <li class="sel"><a href="#">Seleccionar</a></li>
    <li><a href="#">Opcion 1</a></li>
    <li><a href="#">Opcion 2</a></li>
    <li><a href="#">Opcion 3</a></li>
</ul>

CSS

ul {
    text-decoration:none;
    padding:0;
    display:block;
}

ul li {
    display:none;
    background:#ccc;
    padding:10px 0px;
    border-bottom:1px solid #fff;
}

ul li:first-child {
    display:block;
}

ul li a {
    text-decoration:none;
    color:#fff;
    padding:5px 15px;
    text-transform:uppercase;
    font-weight:bold;
    font-size:18px;
    font-family:Arial;
    letter-spacing: 2px;
}

JavaScript

$(".unstyled li").click(function() {
    $(".unstyled li").removeClass("sel");
    $(this).addClass("sel").show();
    $(this).siblings().slideToggle(200);		
});