JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

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

CSS

/**
 * CSS3 Radioactive Symbol
 */


* { margin: 0; padding: 0; }

body {
    width: 840px;
    height: 840px; 
    margin: 0px auto;
    background: black;
    position: relative;
    top:     150px;
    -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,.2), 0px 0px 15px rgba(255,255,0,.8);
       -moz-box-shadow: 0px 0px 50px rgba(0,0,0,.2), 0px 0px 15px rgba(255,255,0,.8);
        -ms-box-shadow: 0px 0px 50px rgba(0,0,0,.2), 0px 0px 15px rgba(255,255,0,.8);
         -o-box-shadow: 0px 0px 50px rgba(0,0,0,.2), 0px 0px 15px rgba(255,255,0,.8);
            box-shadow: 0px 0px 50px rgba(0,0,0,.2), 0px 0px 15px rgba(255,255,0,.8);

    -webkit-animation-name: 'tWrap';
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -webkit-animation-timing-function: ease-in-out;    
    
    }

@-webkit-keyframes 'tWrap' {      
        0% {
           border: 60px solid #000;

        }
        100% {
           border: 60px solid yellow;

        }
    }

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;
            border-radius: 90px;
    border: 20px solid yellow;
    z-index: 4;
    }

#t { /* triangle top */
    width:0;
    height:0;
    z-index: 3;    
    position: absolute;
    border-style: solid;
    border-width: 0 215px 400px 215px;
    border-color: transparent transparent yellow transparent;    
    -webkit-transform: rotate(-180deg); 
       -moz-transform: rotate(-180deg);  
        -ms-transform: rotate(-180deg);  
         -o-transform:...

JavaScript

// radioactive symbol by @genelocklin