JSFiddle - React, Tailwind, and code Playground

HTML

<div id="button">
    <button class="tombol">Klik Tombol ini</button>
<ul class="slide">
    <li><a href="#">Link Title 1</a></li>
    <li><a href="#">Link Title 2</a></li>
    <li><a href="#">Link Title 3</a></li>
    <li><a href="#">Link Title 4</a></li>
</ul>
</div><!-- end button-->

CSS

body{padding:20px;background:#000}
#button{
    height: 32px;
    width: 184px;
    margin: auto;
}

ul, li {
    margin:0; 
    padding:0; 
    list-style:none;
}

.tombol {
    border:1px solid #1c1c1c;
}

.slide {
    display:none;
    width:300px;
    border: 1px solid #ff0000;
}

.slide li {
    background-color: :00ff00;
}

.slide li a {
    color:#FFFFFF; 
    text-decoration:none; 
    padding:10px; 
    display:block;
}

.slide li a:hover {
    padding:10px;
    font-weight:bold;
    color: #067393;
}

JavaScript

$(document).ready(function () {
    $('.tombol').click(function () {
    $('ul.slide').slideToggle('medium');
    });
});