JSFiddle - React, Tailwind, and code Playground

by alirokni

HTML

<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>

CSS

body {
  background: gray;
  margin: 30px
}

div {
  color: #fff;
  border: 1px solid black;
  border-radius: 15px;
  width: 20px;
  text-indent: 6px
}

div:before,
div:after {
  border: inherit;
  position: absolute;
  border-radius: 15px;
  width: 20px;
  text-indent: 6px
}

.one {
  background: red;
  position: relative;
}

.one:before {
  content: "a";
  left: 20px;
  top: -20px;
}

.one:after {
  content: "b";
  left: 20px;
  top: 20px;
}

.two {
  background: green;
  margin: 40px 0;
  position: relative;
}

.two:before {
  content: "c";
  left: 20px;
  top: -20px;
}

.two:after {
  content: "d";
  left: 20px;
  top: 20px;
}

.three {
  background-color: blue;
  position: relative;
}

.three:before {
  content: "e";
  left: 20px;
  top: -20px;
}

.three:after {
  content: "f";
  left: 20px;
  top: 20px;
}

.one:before {
  transform: translate3d(-43px, 19px, 0)
}

.one:after {
  transform: translate3d(1px, -21px, 0)
}

.two:before {
  transform: translate3d(-21px, -2px, 0)
}

.two:after {
  transform: translate3d(-21px, 0px, 0)
}

.three:before {
  transform: translate3d(1px, 19px, 0)
}

.three:after {
  transform: translate3d(-43px, -21px, 0)
}