JSFiddle - React, Tailwind, and code Playground

HTML

<p>This is modified code from <a href="http://blog.end3r.com/118/css3-efekt-kilku-zdjec-spietych-spinaczem-biurowym/">http://blog.end3r.com/118/css3-efekt-kilku-zdjec-spietych-spinaczem-biurowym/</a></p>


<p>haalo</p>

<div class="aboutImg"> 
    <img src="http://blog.end3r.com/stuff/paperclip/andrzejmazur.jpg" alt="Andrzej Mazur" /> 
</div>

CSS

.aboutImg {
    margin: 50px;
    clear: both;
    float: left;
    position: relative;
    -moz-transform: rotate(6deg);
    -webkit-transform: rotate(6deg);
    -moz-box-shadow: 0px 1px 6px #666;
    -webkit-box-shadow: 0px 1px 6px #666;
    background: #fff;
}
.aboutImg img {
    -moz-transform: rotate(-8deg);
    -webkit-transform: rotate(-8deg);
    -moz-box-shadow: 0px 1px 6px #666;
    -webkit-box-shadow: 0px 1px 6px #666;
    border: 4px solid #fff;
    background: #fff;
    padding: 4px;
    float: left;
}
.aboutImg:before {
    display: block;
    content: '';
    position: absolute;
    top: -15px;
    right: 30px;
    width: 14px;
    height: 54px;
    z-index: 1;
    border: 2px solid #999;
    -moz-transform: rotate(4deg);
    -webkit-transform: rotate(4deg);
    -moz-box-shadow: 1px 1px 1px #555, inset 1px 1px 1px #555;
    -webkit-box-shadow: 1px 1px 1px #555, inset 1px 1px 1px #555;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}
.aboutImg:after {
    display: block;
    content: ''; 
    position: absolute;
    top: -8px;
    right: 25px;
    width: 8px;
    height: 8px;
    background: #fff;
    z-index: 2;
}