JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

<div class="each">
  <a href="#" class="btn"><span>What a button!</span></a>
</div>

CSS

.btn {
  color: #fff;
  background: #0079c1;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  border: 0;
  outline: 0;
  font-size: 1.1rem;
  padding: 12px 35px;
  display: inline-block;
  transform: skew(-21deg);
  border-radius:5px;
  }
  .btn:visited { color: #fff; }
  .btn:hover { background: #0069a8; }
  .btn > span { display: inline-block; transform: skew(21deg); } /* Un-skew the text */