JSFiddle - React, Tailwind, and code Playground

by kthornbloom

HTML

<input type="text" placeholder="focus here then tab down">

<br><br>

<a href="#" id="button" class="btn">this is a Link</a> <- works with keyboard focus and enter


<br><br>

<div id="notbutton" class="btn">
this is a Div
</div> <- only works w/ mouse (would require keypress event)

CSS

body {
  font-family: sans-serif;
}

input {
  width: 400px;
}

.btn {
  background: #eee;
  border: 1px solid #666;
  display: inline-block;
  padding: 2px 10px;
  font-size: 13px;
  border-radius: 4px;
  color: #222;
  text-decoration: none;
}

.btn:focus {
  box-shadow: 0 0 0 2px blue;
}

JavaScript

document.getElementById('button').onclick = function(e){
	alert('It worked!');
}

document.getElementById('notbutton').onclick = function(e){
	alert('It worked!');
}