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, 25, 25, 0.9);
background-image: -moz-radial-gradient(50% 50%, circle contain, rgba(255, 25, 25, 0.9), #0000ff 65%,#007a99 100%);
background-image: -webkit-radial-gradient(50% 50%, circle contain, rgba(255, 25, 25, 0.9), #0000ff 65%,#007a99 100%);
background-image: -o-radial-gradient(50% 50%, circle contain, rgba(255, 25, 25, 0.9), #0000ff 65%,#007a99 100%);
background-image: -ms-radial-gradient(50% 50%, circle contain, rgba(255, 25, 25, 0.9), #0000ff 65%,#007a99 100%);
background-image: radial-gradient(50% 50%, circle contain, rgba(255, 25, 25, 0.9), #0000ff 65%,#007a99 100%);
    
    margin: 9em auto;
    border: 10px solid hsla(0,0%,0%,.7);
    box-shadow: inset 0 15px 15px -5px hsla(0,0%,100%,.7),
                inset 0 -5px 10px 3px hsla(0,0%,0%,.6), 
                0 8px 10px 2px hsla(0,0%,0%,.3);
    -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);
    
    
background-size: 24em;
background-position: center;
}

div:hover { 

    
background-color:rgba(255, 25, 25, 0.9);
background-image: -moz-radial-gradient(50% 50%, circle contain, rgba(255, 25, 25, 0.9), #0000ff 65%,#007a99 100%);
background-image: -webkit-radial-gradient(50% 50%, circle contain, rgba(255, 25, 25, 0.9), #0000ff...