JSFiddle - React, Tailwind, and code Playground

by olegatilla

HTML

<span class="label"></span>

CSS

.label {
  display: inline-block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
float: none;
z-index: auto;
width: 0.75em;
height: 0.75em;
position: relative;
cursor: default;
opacity: 1;
margin: 0;
padding: 0;
overflow: visible;
border: 0.15em solid #1abc9c;
-webkit-border-radius: 1em;
border-radius: 1em;
font: normal 8em/normal Arial, Helvetica, sans-serif;
color: rgba(0,0,0,1);
-o-text-overflow: clip;
text-overflow: clip;
background: none;
-webkit-box-shadow: none;
box-shadow: none;
text-shadow: none;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
-webkit-transform: none;
transform: none;
-webkit-transform-origin: 50% 50% 0;
transform-origin: 50% 50% 0;
}

.label:after{
  display: inline-block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
float: none;
z-index: auto;
width: 0.85em;
height: 0.15em;
position: absolute;
content: "";
cursor: default;
opacity: 1;
top: 0.3em;
left: -0.05em;
margin: 0;
padding: 0;
overflow: visible;
border: none;
-webkit-border-radius: 0;
border-radius: 0;
font: normal 100%/normal Arial, Helvetica, sans-serif;
color: rgba(0,0,0,1);
-o-text-overflow: clip;
text-overflow: clip;
background: #1abc9c;
-webkit-box-shadow: none;
box-shadow: none;
text-shadow: none;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
-webkit-transform: rotateZ(-45deg)   ;
transform: rotateZ(-45deg)   ;
-webkit-transform-origin: 50% 50% 0;
transform-origin: 50% 50% 0;
}