JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<div></div>

CSS

body { background: #191919; }

div { 
    height: 24em; 
    width: 24em;
    
    -webkit-border-radius: 12.5em;
    -moz-border-radius: 12.5em;
    -ms-border-radius: 12.5em;
    -o-border-radius: 12.5em;
    border-radius: 12.5m;
    
background-color:rgba(255, 255, 255, 0.5);
background-image: -moz-radial-gradient(50% 50%, ellipse cover, rgba(255, 255, 255, 0.5), rgba(0, 0, 255, 0) 6%,#990000 100%);
background-image: -webkit-radial-gradient(50% 50%, ellipse cover, rgba(255, 255, 255, 0.5), rgba(0, 0, 255, 0) 6%,#990000 100%);
background-image: -o-radial-gradient(50% 50%, ellipse cover, rgba(255, 255, 255, 0.5), rgba(0, 0, 255, 0) 6%,#990000 100%);
background-image: -ms-radial-gradient(50% 50%, ellipse cover, rgba(255, 255, 255, 0.5), rgba(0, 0, 255, 0) 6%,#990000 100%);
background-image: radial-gradient(50% 50%, ellipse cover, rgba(255, 255, 255, 0.5), rgba(0, 0, 255, 0) 6%,#990000 100%);

    
    margin: 9em auto;
    border: .5em solid rgba(255,255,255,.25);

    -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 .25s cubic-bezier(.32,0,.15,1);
       -moz-transition:    -moz-transform .25s cubic-bezier(.32,0,.15,1);
        -ms-transition:     -ms-transform .25s cubic-bezier(.32,0,.15,1);
         -o-transition:      -o-transform .25s cubic-bezier(.32,0,.15,1);
            transition:         transform .25s cubic-bezier(.32,0,.15,1);
    
    -webkit-box-shadow: inset 0 1em 0 rgba(255, 255,255,.05);
    
background-size: 24em;
background-position: center;
}

div:hover { 

    
background-color:rgba(255, 255, 255, 0.5);
background-image: -moz-radial-gradient(50% 50%, ellipse cover, rgba(255, 255, 255, 0.5), rgba(0, 0, 255, 0) 6%,#990000 100%);
background-image: -webkit-radial-gradient(50% 50%, ellipse cover, rgba(255, 255, 255, 0.5), rgba(0, 0, 255, 0) 6%,#990000...