JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdn.shopify.com/s/files/1/0730/7477/t/2/assets/fonts.css">
<input type="submit" name="checkout" value="Checkout" class="checkout">

CSS

input#purchase, input.checkout, .btn-border {
  padding: 4px 20px;
  font-family: 'BebasNeue', 'Trebuchet MS', sans-serif;
  font-size: 18px;
  line-height: 1;
  display: inline-block;
  box-sizing: border-box;
  border: 3px #D39229 solid;
  border-radius: 0px;
  cursor: pointer;
  color: #D39229;
  background: rgba(0, 0, 0, 0);
  /* I could not tell if you needed this or not so I just left it alone*/
  align-items: start;
}