JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<div id="simon"></div>

SCSS

* {
    margin: 0; padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box; }

html {
    font-size: 100%;
    background: #f1f2f3; }

body { 
    max-width: 26em;
    width: 90%; 
    margin: 0 auto;
}

#simon { 
    margin: 3em auto;

    width: 0;
    height: 0;

    border-radius: 100%;
    border-top-color: black;
    border-right-color: white;
    border-bottom-color: black;
    border-left-color: white;
    border-style: solid;
    border-width: 10em;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    position: relative;
    &:before { 
        content: "";
        width: 0;
        height: 0;
        border-radius: 100%;
        border-top-color: green;
        border-right-color: red;
        border-bottom-color: yellow;
        border-left-color: blue;
        border-style: solid;
        border-width: 5em;
        left: -5em;
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);        
        top: -5em;
        border-radius: 100%;
        background: #000;
        position: absolute; 
        z-index: 2;    
    }
    &:after { 
        content: "";
        width: 0;
        height: 0;
        border-radius: 100%;
        border-top-color: white;
        border-right-color: black;
        border-bottom-color: white;
        border-left-color: black;
        border-style: solid;
        border-width: 2.5em;
        left: -2.5em;
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);        
        top: -2.5em;
        border-radius: 100%;
        background: #000;
 ...