JSFiddle - React, Tailwind, and code Playground

HTML

<div class="keys">
<ul>
	<li class="jsNumberKey" data-value="1"><a href="#">1</a></li>
    <li class="jsNumberKey" data-value="2"><a href="#">2</a></li>
    <li class="jsNumberKey" data-value="3"><a href="#">3</a></li>
    <li class="jsNumberKey" data-value="4"><a href="#">4</a></li>
    <li class="jsNumberKey" data-value="5"><a href="#">5</a></li>
    <li class="jsNumberKey" data-value="6"><a href="#">6</a></li>
    <li class="jsEraseKey"><a href="#" class="key-backspace">Delete</a></li>
</ul>
</div>

CSS

.keys {
width: 100%;
left: 28px;
right: auto;
top: 578px;
}
.keys ul {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.keys li {
float: left;
margin: 0 0 7px 7px;
}
.keys a, .keys a.long-press:active {
display: block;
height: 60px;
width: 55px;
border: 1px solid #9e9e9e;
line-height: 60px;
font-size: 36px;
font-family: TimesModern-Bold;
text-align: center;
text-decoration: none;
color: #a8a8a8;
background: #F4F4F4;
}

JavaScript

$('ul', 'div.keys').on('mousedown', '.jsNumberKey', function () {
    console.log('mousedown');
    return false;
});