JSFiddle - React, Tailwind, and code Playground
HTML
<div id="containerz">
<span alt="blow my minds" class="pfft" />
<span alt="blow my minds" class="pfft-shadow" />
<img src="http://www.placekitten.com/125/125" alt="meow" />
</div>
CSS
.pfft {
background-color: #fff;
display: block;
margin: 0 auto;
padding: 5px;
position: relative;
height: 125px;
width: 125px;
z-index: 999;
}
.pfft:before {
content: "";
background: red;
border: 17px solid yellow;
border-width: 17px;
border-left-color: #fff;
border-top-color: #fff;
border-bottom-color: transparent;
border-right-color: transparent;
display: block;
height: 0;
left: 0;
position: absolute;
top: 2px;
width: 0;
z-index: 999;
}
.pfft:after {
content: "";
background: transparent;
border: 17px solid transparent;
border-width: 17px;
border-left-color: transparent;
border-top-color: transparent;
border-bottom-color: #fff;
border-right-color: #fff;
bottom: -5px;
display: block;
height: 0;
right: -5px;
position: absolute;
text-shadow: 1px 1px 1px #444;
width: 0;
z-index: 999;
}
.pfft-shadow:before {
content: "";
background: transparent;
border: 18px solid transparent;
border-width: 18px;
border-left-color: rgba(0,0,0,.1);
border-top-color: rgba(0,0,0,.1);
border-bottom-color: transparent;
border-right-color: transparent;
display: block;
height: 0;
left: 0;
position: absolute;
top: 2px;
width: 0;
z-index: 998;
}
.pfft-shadow:after {
content: "";
background: transparent;
border: 18px solid transparent;
border-width: 18px;
border-left-color: transparent;
border-top-color: transparent;
border-bottom-color: rgba(0,0,0,.1);
border-right-color: rgba(0,0,0,.1);
bottom: -5px;
display: block;
height: 0;
right: -5px;
position: absolute;
width: 0;
z-index: 998;
}
img {
border: 1px solid #eaeaea;
box-shadow: 1px 1px 4px rgba(0,0,0,.1);
margin: 0;
padding: 3px;
position: relative;
z-index: 1;
}