JSFiddle - React, Tailwind, and code Playground

by Matthew Day

HTML

<div width="100%" style =" float:right"  >
  <input type="image" value="resources/images/btn-tabl.png"  class ="tabl_btn"/>
  <input type="image" value="resources/images/btn-map.png" class ="tabl_btn"/>
  <input type="image" value="resources/images/btn-graph.png" class ="tabl_btn"/>
</div>

CSS

.tabl_btn {
    width: 62px;
    height: 28px;
    padding-top: 10px;
    padding-bottom: 3px;
    padding-left: 10px;
    box-shadow: none !important;
}

input[type="image"]:focus,
input[type="image"]:active {
  color: red;
  /* outline: none; */
}

JavaScript

/*

TESTED ONLY IN FIREFOX AND CHROME

Click on the first input area in the lower right frame and then hit the tab key to see the Focus state which shows a dotted border. To eliminate the dotted border, use 'outline: none'.

*/