JSFiddle - React, Tailwind, and code Playground

HTML

<form action="/" method="get"> 
    <button id="action">Action</button>
    <label for="action">&#x25bc;
        <ul>                
            <li title="Edit selected"><input id="edit" type="radio" name="action" value="edit" hidden checked /><label for="edit">Edit</label></li>
            <li title="Delete selected"><input id="delete" type="radio" name="action" value="delete" hidden /><label for="delete">Delete</label></li>
            <li title="Mark selected as read"><input id="read" type="radio" name="action" value="read" hidden /><label for="read">Read</label></li>
            <li title="Mark selected as spam"><input id="spam" type="radio" name="action" value="spam"  hidden /><label for="spam">Spam</label></li>
        </ul>
    </label>
</form>

CSS

body {padding:25px;}
button, label {cursor: pointer;}
button,
button + label {
    float: left;
    display: inline-block;
    margin: 0;
    background: #659A22 repeat-x;
    background-image: -webkit-linear-gradient(top, #9AC92C, #659A22);
    background-image: -o-linear-gradient(top, #9AC92C, #659A22);
    background-image: -moz-linear-gradient(top, #9AC92C, #659A22);
    background-image: linear-gradient(top, #9AC92C, #659A22);
    border: 1px solid rgba(0, 0, 0, 0.0976563);
    border-bottom-color: rgba(0, 0, 0, 0.246094);
    border-top-color: rgba(255, 255, 255, 0.148438);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    line-height: 16px;
    padding: 5px 10px;
    text-shadow: #659A22 1px 1px 0px;
    -webkit-transition: 0.1s linear all;
    transition: 0.1s linear all;
    vartical-align: middle;
}
button:hover, button + label:hover {
    text-decoration: none;
    background-color: #659A22;
    background-position: 0 -15px;
    -webkit-transition: background-position 0.1s linear;
    -o-transition: background-position 0.1s linear;
    -moz-transition: background-position 0.1s linear;
    transition: background-position 0.1s linear;  
}
button {border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
button:active {
    color: #fff;
    box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);     
}
button + label {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    position: relative;   
}
button + label:hover > ul {
    visibility: visible;
    opacity:1;
    margin: 0;  
}
ul {
    visibility: hidden;
    position: absolute;
    top: 30px;
    right: 0;
    width: 90px;
    margin: 20px 0 0 0;
    padding: 10px 0;
    z-index: 9999;
    border: 1px solid #ccc;
    border-top-clor: #cfcfcf;
    border-image: initial;
    background: #fff;
    color: #659A22;
    text-shadow: none;
    opacity: 0;
    box-shadow: 1px 2px 4px...

JavaScript

$(document).ready(function () {
    $('form').submit(function(e){
        e.preventDefault();
        var action = $(this).serializeArray()
        alert('Submit an action: ' + action[0].value);        
    });
});