JSFiddle - React, Tailwind, and code Playground

by Cath_kb

HTML

<div id="fdct">
</div>

CSS

#fdct:hover {
        background-image: url('http://jsfiddle.net/img/logo.png');
}
#fdct {
        position: relative;
        width: 256px;
        height: 256px;
        background-image: url('http://forum.htmlbook.ru/public/style_images/htmlbook/logo.png');
        -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
        -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
}
#fdct:before, #fdct:after {
        position: absolute;
        width: 40%;
        height: 10px;
        content: ' ';
        left: 12px;
        bottom: 12px;
        background: transparent;
        -webkit-transform: skew(-5deg) rotate(-5deg);
        -moz-transform: skew(-5deg) rotate(-5deg);
        -ms-transform: skew(-5deg) rotate(-5deg);
        -o-transform: skew(-5deg) rotate(-5deg);
        transform: skew(-5deg) rotate(-5deg);
        -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
        -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
        z-index: -1;
}
#fdct:after {
        left: auto;
        right: 12px;
        -webkit-transform: skew(5deg) rotate(5deg);
        -moz-transform: skew(5deg) rotate(5deg);
        -ms-transform: skew(5deg) rotate(5deg);
        -o-transform: skew(5deg) rotate(5deg);
        transform: skew(5deg) rotate(5deg);
}