JSFiddle - React, Tailwind, and code Playground

by TimPietrusky

HTML

<script src="https://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js"></script>
<div class="elements">&nbsp;</div>

CSS

body {
  margin:1.5em;
  font-size:2.5em;
  background:#999;
}

.elements {
  position:relative;
  margin:0 auto;
  height:1em;
  width:1em;
  box-shadow:0 0 0 .65em #006;
  background:#006;
  border-radius:50%;
}

.elements::first-line, 
.elements::first-letter {
  font-size:1em;
  line-height:0;
  letter-spacing:1em;
}

.elements::first-line {
  box-shadow:-6em .5em 0 .5em #600;
}

.elements::first-letter {
  box-shadow:-3em .5em 0 .5em #060;
  border-radius:1% 20%;
}

.elements:before,
.elements:after {
  position:absolute;
  content:'';
  top:-.5em;
  height:2em;
  width:2em;
}

.elements:before {
  right:-3.5em;
  background:#606;
  transform:skew(25deg);
}

.elements:after {
  right:-6.8em;
  background:#660;
  transform:rotate(45deg);
}