JSFiddle - React, Tailwind, and code Playground

by fparent

HTML

<div>3</div>

CSS

div {
    width: 100px;
    height: 100px;
    background: #15e1ff;
    text-align: center;
    color: #fff;
    font: 40px/90px Georgia;
    border: solid 4px magenta;
    margin: 20px;
    cursor: pointer;
    
  -webkit-border-radius: 10px; 
     -moz-border-radius: 10px; 
          border-radius: 10px; 

  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
    
    transition: all 0.5s linear;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
}

div:hover {
    background: magenta;
    
  -webkit-box-shadow: inset 0 0 0 100px magenta; 
     -moz-box-shadow: inset 0 0 0 100px magenta; 
          box-shadow: inset 0 0 0 100px magenta; 
}