JSFiddle - React, Tailwind, and code Playground

by devy indriyani

HTML

<div class="boxes ribbon1">
   <p>Image</p>
</div>

CSS

.boxes {
    box-shadow: 0 0 3px rgba(0,0,0,0.25);
    height: 200px;
    position: relative;
    width: 210px;
    background:url(http://3.bp.blogspot.com/-nwpkFsHPfAI/VL-MSK-8foI/AAAAAAAABJY/mrHjy8xDPEU/s1600/sb-77%2Blogo.png) no-repeat center center;
    margin: 35px auto;
}

.boxes p {
    background: #08b;
    background-image: radial-gradient(transparent 30%, rgba(0, 0, 0, 0.2));
    background-image: -webkit-radial-gradient(transparent 30%, rgba(0, 0, 0, 0.2));
    background-image: -moz-radial-gradient(transparent 30%, rgba(0, 0, 0, 0.2));
    background-image: -ms-radial-gradient(transparent 30%, rgba(0, 0, 0, 0.2));
    background-image: -o-radial-gradient(transparent 30%, rgba(0, 0, 0, 0.2));
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    position: relative;text-shadow: 1px 2px 1px #111;
    margin-top: -12px;
}

.ribbon1:before, .ribbon1:after {
    bottom: 30px;
    box-shadow: 0 30px 10px rgba(0,0,0,0.8);
    content: "";
    height: 50px;
    position: absolute;
    width: 47.5%;
    z-index: -1;
}

.ribbon1:before {left: 3%;transform: rotate(-5deg)}
.ribbon1:after {right: 3%;transform: rotate(5deg)}
.ribbon1 p {
    border-width: 1px 1px 2px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
    padding: 4px 40px;
    position: absolute;
    right: -14px;
    top: 12px;
}

.ribbon1 p:after {
    border-width: 7px;
    border-style: solid;
    border-color: #134 transparent transparent #134;
    bottom: -15px;
    content: "";
    position: absolute;
    right: -1px;
}