JSFiddle - React, Tailwind, and code Playground

by Nonamenonamevi4

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="red"></div>
  <div class="yellow"></div>
  <div class="green"></div>
</body>
</html>

CSS

div {
  width: 150px;
  height: 50px;
  margin: 10px;
  border: 5px solid black;
  position: relative;
}

div:after {
  content: "";
  width: 10px;
  height: 20px;
  background-color: black;
  position: absolute;
  right: -10px;
  top: 15px;
}

.red {
  background: linear-gradient(to right, #ED1C24 0%, #ed1c24 33%, #fff 33%);
}
.yellow {
  background: linear-gradient(to right, #FFC60B 0%, #ffc60b 66%, #fff 66%);
}

.green {
  background-color: #00a055;
}