JSFiddle - React, Tailwind, and code Playground

by vend3tta

HTML

<div class="b-container">
    <ul class="b-menu">
        <li class="b-item">CONTENT</li>
        <li class="b-item"></li>
        <li class="b-item"></li>
        <li class="b-item"></li>
        <li class="b-item"></li>
        <li class="b-item"></li>
    </ul>
</div>

CSS

body {
    background: #fff;
    font-family: Arial
    }
.b-container {
    margin: 40px auto
    }
.b-menu {
    display: block
    }
.b-item {
    -webkit-transition: all linear .5s;
    -moz-transition: all linear .5s;
    -ms-transition: all linear .5s;
    -o-transition: all linear .5s;
    transition: all linear .5s;
    display: block;
    float: left;
    margin: 2%;
    padding: 15px 2%;
    width: 40%;
    height: 120px;
    text-align: center;
    background: -webkit-radial-gradient(95% center, closest-corner, #d02c30 90%, #fff 90%),
                #fff;
    border-radius: 10px;
    border: 1px solid #d02c30;
    }
.b-item:nth-child(-n+1) {
    -webkit-transform: rotate(12deg);
    box-shadow: 0 5px 0 rgba(0,0,0,.2)
    }
.b-item:nth-child(-2n+2) {
    -webkit-transform: rotate(-8deg);
    }