JSFiddle - React, Tailwind, and code Playground

HTML

<div class="circ"></div>
<div class="circ2"></div>
<div class="circ3"></div>

CSS

.circ {
    border: 3px solid #0099ff;
    color:transparent;
    border-radius:1000px;
    width:20px;
    height:20px;
    -webkit-transition: all 2.3s; 
}

.circ:hover {
    -webkit-transform: scale(5);
}

.circ2 {
    border: 15px solid #0099ff;
    color:transparent;
    border-radius:1000px;
    width:100px;
    height:100px;
    -webkit-transform: scale3d(0.2,0.2,2);
    -webkit-transition: all 2.3s; 
}

.circ2:hover {
    -webkit-transform: scale3d(1,1,1);
}

.circ3 {
    top: 100px;
    border: 15px solid #0099ff;
    color:transparent;
    border-radius:1000px;
    width:100px;
    height:100px;
    -webkit-transform: scale(0.2);
    -webkit-transition: all 2.3s; 
}

.circ3:hover {
    -webkit-transform: scale(1);
}










body {margin:90px;}