JSFiddle - React, Tailwind, and code Playground

by duopixel

HTML

<!doctype html>
<html>
<head>
</head>
<body>
<div class="box"></div>
</body>
</html>

CSS

.box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 200px;
    margin-top: -100px;
    margin-left: -200px;
    background: #00A4DD;
}

.box {-webkit-box-shadow: -1px -1px 0 1px #7ccbea, -2px -2px 0 1px #7ccbea, -3px -3px 0 1px #7ccbea ,-4px -4px 0 1px #7ccbea, -5px -5px 0 1px #7ccbea, -6px -6px 0 1px #7ccbea, -7px -7px 0 1px #7ccbea, -8px -8px 0 1px #7ccbea; 
-webkit-transition : all 0.1s;
}

.box:hover {-webkit-box-shadow: -1px -1px 0 1px #7ccbea, -2px -2px 0 1px #7ccbea, -3px -3px 0 1px #7ccbea ,-4px -4px 0 1px #7ccbea, -5px -5px 0 1px #7ccbea, -6px -6px 0 1px #7ccbea, -7px -7px 0 1px #7ccbea, -8px -8px 0 1px #7ccbea, -9px -9px 0 1px #7ccbea, -10px -10px 0 1px #7ccbea, -11px -11px 0 1px #7ccbea, -12px -12px 0 1px #7ccbea;}

.box:hover{margin-top: -96px; margin-left: -196px;}