JSFiddle - React, Tailwind, and code Playground

HTML

<input class="button default" type="submit" value="Search">
<input class="button green" type="submit" value="Search">
<input class="button red" type="submit" value="Search">

CSS

/* Color gradients as served from LESS */
.default {
  background: #3f4c6b;
  background: -moz-linear-gradient(top, #d2d2d2 0%, #7a7a7a 6%, #4d4d4d 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d2d2d2), color-stop(6%, #7a7a7a), color-stop(100%, #4d4d4d));
  background: -webkit-linear-gradient(top, #d2d2d2 0%, #7a7a7a 6%, #4d4d4d 100%);
  background: -o-linear-gradient(top, #d2d2d2 0%, #7a7a7a 6%, #4d4d4d 100%);
  background: -ms-linear-gradient(top, #d2d2d2 0%, #7a7a7a 6%, #4d4d4d 100%);
  background: linear-gradient(to bottom, #d2d2d2 0%, #7a7a7a 6%, #4d4d4d 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@middle', endColorstr='@stop', GradientType=0);
  border: 1px solid #3c3c3c;
}
.default:hover {
  background: #52638b;
  background: -moz-linear-gradient(top, #ebebeb 0%, #949494 6%, #676767 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ebebeb), color-stop(6%, #949494), color-stop(100%, #676767));
  background: -webkit-linear-gradient(top, #ebebeb 0%, #949494 6%, #676767 100%);
  background: -o-linear-gradient(top, #ebebeb 0%, #949494 6%, #676767 100%);
  background: -ms-linear-gradient(top, #ebebeb 0%, #949494 6%, #676767 100%);
  background: linear-gradient(to bottom, #ebebeb 0%, #949494 6%, #676767 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@middle', endColorstr='@stop', GradientType=0);
  border: 1px solid #3c3c3c;
}
.default:active {
  background: #2c354b;
  background: -moz-linear-gradient(top, #b9b9b9 0%, #616161 6%, #333333 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b9b9b9), color-stop(6%, #616161), color-stop(100%, #333333));
  background: -webkit-linear-gradient(top, #b9b9b9 0%, #616161 6%, #333333 100%);
  background: -o-linear-gradient(top, #b9b9b9 0%, #616161 6%, #333333 100%);
  background: -ms-linear-gradient(top, #b9b9b9 0%, #616161 6%, #333333 100%);
  background:...