JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<div></div>

CSS

body { background: #191919; }

div { 
    height: 48em; 
    width: 48em;
    

    
    margin: 9em auto;
    border: .5em solid rgba(255,255,255,.5);
    background-image: -moz-repeating-radial-gradient(50% 50%, ellipse cover, rgba(255, 255, 255, 0.5), #0000ff -100%,rgba(153, 3, 3, 0) 100%);
    background-image: -webkit-repeating-radial-gradient(50% 50%, ellipse cover, rgba(255, 255, 255, 0.5), #0000ff -100%,rgba(153, 3, 3, 0) 100%);
    background-image: -o-repeating-radial-gradient(50% 50%, ellipse cover, rgba(255, 255, 255, 0.5), #0000ff -100%,rgba(153, 3, 3, 0) 100%);
    background-image: -ms-repeating-radial-gradient(50% 50%, ellipse cover, rgba(255, 255, 255, 0.5), #0000ff -100%,rgba(153, 3, 3, 0) 100%);
    background-image: repeating-radial-gradient(50% 50%, ellipse cover, rgba(255, 255, 255, 0.5), #0000ff -100%,rgba(153, 3, 3, 0) 100%);

    -webkit-transform: scale3d(.66,.66,1);
       -moz-transform:   scale(.66);
        -ms-transform:   scale(.66);
         -o-transform:   scale(.66);
            transform:   scale(.66);
    
    -webkit-transition: -webkit-transform .5s cubic-bezier(.32,0,.15,1);
       -moz-transition:    -moz-transform .5s cubic-bezier(.32,0,.15,1);
        -ms-transition:     -ms-transform .5s cubic-bezier(.32,0,.15,1);
         -o-transition:      -o-transform .5s cubic-bezier(.32,0,.15,1);
            transition:         transform .5s cubic-bezier(.32,0,.15,1);
    
background-size: .75em;
background-position: center;}

div:hover { 
    -webkit-border-radius: 24em;
    -moz-border-radius: 24m;
    -ms-border-radius: 24m;
    -o-border-radius: 24m;
    border-radius: 24em;
    
    background-color:rgba(255, 255, 255, 0.5);
background-image: -moz-repeating-radial-gradient(50% 50%, ellipse cover, rgba(255, 255, 255, 0.5), #0000ff 6%,rgba(153, 3, 3, 0) 62%);
background-image: -webkit-repeating-radial-gradient(50% 50%, ellipse cover, rgba(255, 255, 255, 0.5), #0000ff 6%,rgba(153, 3, 3, 0) 62%);
background-image:...