JSFiddle - React, Tailwind, and code Playground

by timrwood

HTML

<div class="a"></div>

CSS

.a {
    margin: -100px 0 0 -200px;
    height: 200px;
    width: 400px;
    position: absolute;
    background: #333;
    top: 50%;
    left: 50%;
    -webkit-transition: all 1s;
    -webkit-transform: scale(1);
    opacity: 1;
}

.a:hover {
    -webkit-transform: scale(0.2);
    opacity: 0.1;
}

.a:after {
    position: absolute;
    left: 25%;
    right: 25%;
    top: 100%;
    height: 50%;
    background: #000;
    content: "";
}

.a:before {
    position: absolute;
    left: 25%;
    right: 25%;
    bottom: 100%;
    height: 50%;
    background: #000;
    content: "";
}