JSFiddle - React, Tailwind, and code Playground

by uttara

HTML

<div class="item">
<img src="http://us.123rf.com/400wm/400/400/trexec/trexec0611/trexec061100062/641809-christmas-card-whit-happy-new-year-title-on-white-background.jpg"/>
<div class="corner"></div>
</div>

CSS

body{
    height:400px;
    background-color: #aaa;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ccc), to(#eee));
    background-repeat: repeat-x;
    margin:0;
    padding:0;
}
.item{
    margin:20px;
    height:300px;
    width:400px;
    position:relative;
}

.item img{
    box-shadow:1px 1px 5px 2px #aaa;
 }
.item .corner{
    border-right: 50px solid transparent;
    border-top: 50px solid #f2ebe1;
    height: 0;
    width: 0;
    position:absolute;
    bottom:0px;
    right:0px;
    z-index:2;
    box-shadow:0px 0px 5px 2px #aaa;
}