JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<div></div>

CSS

body { background: #100d11 }

div { 
    height: 12em; 
    width: 12em;
    margin: 3em auto;    
    -webkit-border-radius: 6.5em;    
    background: -webkit-radial-gradient(50% 50%, circle contain, #ff1919, #9cebff 65%,#007a99 100%);  
    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);   
    -webkit-transition: -webkit-transform .25s cubic-bezier(.32,0,.15,1);    

    background-size: 12em;
    background-position: center;
}

div:hover { 

    
    background: -webkit-radial-gradient(50% 50%, circle contain, #ff1919, #9cebff 65%,#007a99 100%);    
    -webkit-transform: scale3d(1,1,1);
 
    -webkit-transition: -webkit-transform .2s cubic-bezier(.32,0,.15,1);

    -webkit-animation: chasePosition 1.4s ease infinite;
}

@-webkit-keyframes chasePosition {
      0% { background-position: left  top,    right  top; }
    100% { background-position: left  top,    right  top; }
}

JavaScript

// http://www.westciv.com/tools/radialgradients/index.html#background-image:%20radial-gradient(50%25%2050%25,%20circle%20contain,%20#ff1919,%20#9cebff%2065%25,#007a99%20100%25)