JSFiddle - React, Tailwind, and code Playground

by Alejandro

HTML

<h2>Button<span>Option 2</span><span>Option 1</span></h2>
<p></p>

CSS

h2 {
    background-color: #465ba4;
    color: #fff;
    padding: 15px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
h2:hover {
    cursor: pointer;
}
h2 span {
    float: right;
    background-color: #5993e0;
    font-size: 14px;
    margin-left: 1em;
    padding: 0.5em 1em;
}
.green {
    background-color: #3e884c;
}

JavaScript

$('h2').click(function () {
    $(this).toggleClass('green');
    $('p').text('You clicked the H2!');
});
$('h2 span').click(function (e) {
    e.stopPropagation();
    var text = $(this).text();
    $('p').text('You clicked ' + text + '!');
});