JSFiddle - React, Tailwind, and code Playground

by will525

HTML

<div class="container">
    <div class="bookmarkRibbontop"></div>
     <div class="square"></div>
    <div class="bookmarkRibbonbottom"></div>
</div>

CSS

.container {
    background:#f3f3f3;
    width:250px;
    height:400px;
    float:left;
}

.bookmarkRibbontop{
     width:0;
    height: 40px;
    border-right: 25px solid #056e8d;
    border-left: 25px solid #056e8d;
     border-top:30px solid transparent;
    -webkit-transform: rotate(-60deg);
    -moz-transform:  rotate(-60deg);
    position:relative;
    top: 22px;
    left: 114px;
}

.bookmarkRibbonbottom{
     width:0;
    height: 40px;
    border-right: 25px solid #056e8d;
    border-left: 25px solid #056e8d;
     border-bottom:30px solid transparent;
    -webkit-transform: rotate(-60deg);
    -moz-transform:  rotate(-60deg);
    position:relative;
    top: -66px;
    left: 101px;
}

.square{
     width:50px;
     height:300px;
     background:#048db5;
    -webkit-transform: rotate(30deg);
    -moz-transform:  rotate(30deg);
    position:relative;
    top: -22px;
    left: 107px;
}