JSFiddle - React, Tailwind, and code Playground

by James Doyle

HTML

<div id="wrap">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>

CSS

#wrap {
    width: 500px;
    height: 200px;
    margin: 30px;
}
#wrap div {
    float: left;
    margin: 5px;
    width: 150px;
    height: 150px;
    background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%);
    box-shadow: 0px 1px 20px rgba(0,0,0,0.4);
}
div.left {
    -webkit-transform-style: preserve-3d;
    -webkit-transform: perspective(100px) rotateY(15deg);
}
div.right {
    -webkit-transform-style: preserve-3d;
    -webkit-transform: perspective(100px) rotateY(-15deg);
}
#wrap div.center {
    margin-top: 17px;
    height: 125px;
    width: 125px;
}