JSFiddle - React, Tailwind, and code Playground

by Graham Dixon

HTML

<div class="css-shapes-preview-border"></div>
<div class="css-shapes-preview"></div>

CSS

*, *:before, *:after{ 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
} 
.css-shapes-preview{ 
    position: absolute; 
    height: 36px; 
    width: 4px; 
    top: 10px; 
    left:11px;
    -webkit-transform: rotate(0deg) skew(0deg); 
    transform: rotate(0deg) skew(0deg); 
    border-top: 3px solid transparent; 
    border-right: 3px solid #ececec; 
    border-bottom: 3px solid transparent; 
}
.css-shapes-preview:after{
        content:'';
    height:36px;
    width:12px;
    position:relative;
    top:-3px;
    left:4px;
    background:#ececec;
    display:block
}
.css-shapes-preview-border{ 
    position: absolute; 
    height: 38px; 
    width: 6px; 
    top: 9px; 
    left:10px;
    -webkit-transform: rotate(0deg) skew(0deg); 
    transform: rotate(0deg) skew(0deg); 
    border-top: 3px solid transparent; 
    border-right: 5px solid #bdbdbd; 
    border-bottom: 3px solid transparent; 
}
.css-shapes-preview-border:after{
     content:'';
    height:38px;
    width:12px;
    position:relative;
    top:-3px;
    left:4px;
    background:#bdbdbd;
    display:block
}