JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        <label>
            <input type="button" value="Button 1" />
            Hello! This is a list item #1.
        </label>
    </li>
    <li>
        <label>
            <input type="button" value="Button 2" />
            Hello! This is a list item #2.
        </label>
    </li>
    <li>
        <label>
            <input type="button" value="Button 3" />
            Hello! This is a list item #3.
        </label>
    </li>
</ul>

CSS

* {font-family: 'Segoe UI', sans-serif;}
ul li,
ul li label {display: block; padding: 5px; cursor: pointer;}
ul li label input {display: none;}
ul li {border-bottom: 1px solid #ccc;}
ul li:hover {background-color: #eee;}

JavaScript

$(document).ready(function(){
    $("input").click(function(){
        alert("Hey you! " + $(this).attr("value"));
    });
});