JSFiddle - React, Tailwind, and code Playground

by slawe

HTML

<div class="page equipe eased-move">
    <div class="triangle" data-name="notre personnel">GREEN</div>
    <div class="trishadow"> </div>
</div>
<div class="page actualities eased-move">
    <div class="triangle" data-name="actualities">RED</div>
    <div class="trishadow"> </div>
</div>

<div class="page labla eased-move">
    <div class="triangle" data-name="personnel">GREEN</div>
    <div class="trishadow"> </div>
</div>
<div class="page blabla eased-move">
    <div class="triangle" data-name="ssss">RED</div>
    <div class="trishadow"> </div>
</div>

CSS

.page:nth-child(odd) .triangle {
    display:inline-block;
    position: relative;
    float: left;
    top:0px; left:0px; bottom:0px;
    width: 100px;
    height: 200px;
    background-image: url(http://magnagestio.fr/assets/_frontend/template/magnagestio/img/mag2/paper-gray.jpg);
    -webkit-transform: skew(-8deg);
    -moz-transform: skew(-8deg);
    -ms-transform: skew(-8deg);
    -o-transform: skew(-8deg);
}
.page:nth-child(even) .triangle {
    display:inline-block;
    position: relative;
    float: left;
    top:0px; left:0px; bottom:0px;
    width: 100px;
    height: 200px;
    background: #937655;
    -webkit-transform: skew(-8deg);
    -moz-transform: skew(-8deg);
    -ms-transform: skew(-8deg);
    -o-transform: skew(-8deg);
}

.page:nth-child(1) .triangle {

background: none;
    top:0px; left:0px; bottom:0px;
}

.page:nth-child(1) .trishadow {
    background: none;
}

.trishadow {
    display: inline-block;
    position: relative;
    float: left;
    top: 0;
    left: 0;
    bottom: 0px;
    width: 10px;
    height: 200px;
    background: red;
    -webkit-transform: skew(-8deg);
    -moz-transform: skew(-8deg);
    -ms-transform: skew(-8deg);
    -o-transform: skew(-8deg);
    //background: #000;
    opacity: 0.2;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}