JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<div id="wrap">

    <!-- biohazard -->
    <div id="bigger-t">                                                   
        <div id="mid-c"></div>                                
        <div id="mid-clear"></div>                           
        <div id="semi-c"></div>
        <div id="small-inner-c"></div>
    </div><!-- /bigger-t -->     
    <!-- /biohazard -->

</div><!-- /wrap -->

CSS

#wrap { 
    text-align: left;
    margin: 0 auto;
    width: 960px;
    }

/*--------- BIOHAZARD -----------*/

#bigger-t { /* black triangle */
    border-color: transparent transparent black transparent;
    border-style: solid;
    border-width: 0 480px 720px 480px;
    width: 0;
    height: 0;
    z-index: 1;
    position: relative;
    margin: 150px 0 30px 0;
    }

#bigger-t:before { /* yellow triangle */
    content:"";
    border-color: transparent transparent yellow transparent;
    border-style: solid;
    border-width: 0 420px 640px 420px;
    width: 0;
    height: 0;
    position: absolute;
    left: -420px;
    top: 50px;
    z-index: 2;
    }

#bigger-t:after { /* inner circle */
    content:"";
    width: 140px;
    height: 140px;
    background-color: transparent;
    border: 20px black solid;
    
    -webkit-border-radius: 100px;
       -moz-border-radius: 100px;
            border-radius: 100px;
    
    position: absolute;
    left: -90px;
    top: 345px;
    z-index: 3;
    
    -webkit-box-shadow: 0px 0px 25px rgba(0,0,0,.8);   
       -moz-box-shadow: 0px 0px 25px rgba(0,0,0,.8);
            box-shadow: 0px 0px 25px rgba(0,0,0,.8);
    
    }

#mid-c { /* middle circle (top) */    
    width: 150px;
    height: 150px;
    background-color: transparent;
    border: 30px black solid;
    
    -webkit-border-radius: 200px;
       -moz-border-radius: 200px;
            border-radius: 200px;
    
    position: relative;
    z-index: 4;
    left: -105px;
    top: 225px;
    } 
    
#mid-c:before { /* middle circle (left) */    
    content:"";
    width: 150px;
    height: 150px;
    background-color: transparent;
    border: 30px black solid;
    
    -webkit-border-radius: 200px;
       -moz-border-radius: 200px;
            border-radius: 200px;
   
    position: absolute;
    z-index: 4;
    left: -120px;
    top: 135px;
    } 

#mid-c:after { /* middle circle (right) */         
    content:"";
    width: 150px;
    height: 150px;
   ...

JavaScript

// http://genelocklin.com/463-css-biohazard-symbol/