JSFiddle - React, Tailwind, and code Playground

by pashkes

HTML

<div>
  <span class="pin" tabindex="0"></span>
</div>

CSS

div {
  position: relative;
  height: 3px;
  width: 200px;
  background-color: yellow;
}
.pin {
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(y);
  -ms-transform: translateY(y);
  -o-transform: translateY(y);
  transform: translateY(y);
  width: 20px;
  height: 20px;
  background-color: pink;
}

JavaScript

var pin = document.querySelector('.pin');
pin.addEventListener('keypress', function (evt) {
	console.log(evt.keyCode);
});