JSFiddle - React, Tailwind, and code Playground
by genelocklin
HTML
<div class="check">check mark</div>
SCSS
html {
background: #fff url(http://f.cl.ly/items/0G3l1S3d0K39232G0p1W/generated.png) 0 0 repeat; }
* {
margin: 0; padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box; }
body {
width: 300px;
margin: 0 auto;
}
.check {
text-indent: -999em;
height: 300px;
width: 300px;
border-radius: 15%;
margin-top: 6em;
background: -moz-linear-gradient(top, #e00702 20%, #ff4900 20%, #ff4900 40%, #ff7300 40%, #ff7300 60%, #fea700 60%, #fea700 80%, #fccf00 80%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(20%,#e00702), color-stop(20%,#ff4900), color-stop(40%,#ff4900), color-stop(40%,#ff7300), color-stop(60%,#ff7300), color-stop(60%,#fea700), color-stop(80%,#fea700), color-stop(80%,#fccf00));
background: -webkit-linear-gradient(top, #e00702 20%,#ff4900 20%,#ff4900 40%,#ff7300 40%,#ff7300 60%,#fea700 60%,#fea700 80%,#fccf00 80%);
background: -o-linear-gradient(top, #e00702 20%,#ff4900 20%,#ff4900 40%,#ff7300 40%,#ff7300 60%,#fea700 60%,#fea700 80%,#fccf00 80%);
background: -ms-linear-gradient(top, #e00702 20%,#ff4900 20%,#ff4900 40%,#ff7300 40%,#ff7300 60%,#fea700 60%,#fea700 80%,#fccf00 80%);
background: linear-gradient(top, #e00702 20%,#ff4900 20%,#ff4900 40%,#ff7300 40%,#ff7300 60%,#fea700 60%,#fea700 80%,#fccf00 80%);
position: relative;
box-shadow: 0px 5px rgba(0,0,0,.25);
}
.check::before, .check::after {
background: #fff;
position: absolute;
content: "";
}
.check::before {
height: 50px;
width: 176px;
top: 125px;
right: 37px;
z-index: 10;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
/*
box-shadow:
0px 10px #E00702,
0px 20px...