JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<a class="btn btn-green">Apps</a>
<a class="btn btn-green">Games</a>

<br>

<a class="btn btn-red">Movies</a>
<a class="btn btn-orange">Music</a>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600);
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.btn {
  display: inline-block;
  width: 180px;
  height: 40px;
  position: relative;
  margin: 10px;
  padding: 0 0 0 30px;
  color: white;
  text-transform: uppercase;
  font: 18px/40px "Open Sans", sans-serif;
  cursor: pointer;
}
.btn:after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  display: block;
}
.btn:hover {
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

.btn-red {
  background: #dd3f35;
}
.btn-red:after {
  border-right: 20px solid #e1544b;
  border-left: 20px solid #dd3f35;
  border-top: 20px solid #e46861;
  border-bottom: 20px solid #d52e24;
}

.btn-green {
  background: #aada32;
}
.btn-green:after {
  border-right: 20px solid #b3de48;
  border-left: 20px solid #aada32;
  border-top: 20px solid #bce25d;
  border-bottom: 20px solid #9dcd25;
}

.btn-orange {
  background: #f6761c;
}
.btn-orange:after {
  border-right: 20px solid #f78535;
  border-left: 20px solid #f6761c;
  border-top: 20px solid #f8944d;
  border-bottom: 20px solid #ef6809;
}