JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<div id="t"></div>

CSS

* { margin: 0; padding: 0; }

html { background: #191919; }

body {
    width: 840px;
    height: 840px; 
    margin: 0px auto;
    background: black;
    position: relative;
    top: 100px;
    -webkit-border-radius: 480px;
       -moz-border-radius: 480px;
        -ms-border-radius: 480px;
         -o-border-radius: 480px;
            border-radius: 480px;
    border: 60px solid yellow;
    z-index: 2;
    -webkit-box-shadow: 0px 0px 50px rgba(0,0,0,.8), 0px 0px 150px rgba(255,255,0,.8);
       -moz-box-shadow: 0px 0px 50px rgba(0,0,0,.8), 0px 0px 150px rgba(255,255,0,.8);
        -ms-box-shadow: 0px 0px 50px rgba(0,0,0,.8), 0px 0px 150px rgba(255,255,0,.8);
         -o-box-shadow: 0px 0px 50px rgba(0,0,0,.8), 0px 0px 150px rgba(255,255,0,.8);
            box-shadow: 0px 0px 50px rgba(0,0,0,.8), 0px 0px 150px rgba(255,255,0,.8);

    -webkit-animation-name: 'body';
    -webkit-animation-duration: 0.5s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -webkit-animation-timing-function: ease;    
    }

body:before { /* top shadow */
    content: "";
    position: fixed;
    top: -10px;
    left: 0px;
    width: 100%;
    height: 10px;
    -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
        -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
          -ms-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
             -o-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
                  box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    z-index: 100;
    }

@-webkit-keyframes 'body' {      
        0% {
            opacity: 0;
        }
        99.999% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }

body:after { /* inner circle */
    content: "";
    top: 335px;
    left: 335px;
    width: 140px;
    height: 140px; 
    background: black;
    position: absolute;
    -webkit-border-radius: 90px;
       -moz-border-radius: 90px;
        -ms-border-radius: 90px;
         -o-border-radius: 90px;
           ...