JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<figure>
    <img src="http://f.cl.ly/items/2g3K3S21171k2j1J3G2a/6760774595_e0dc79fced.jpeg" />
</figure>

CSS

* { margin: 0; padding: 0;
    box-sizing: border-box;
}

body { 
    width: 500px;
    margin: 4.5em auto;
}


figure { 
     position: relative;}


figure:after { 
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 500px;
    width: 500px;
    background: transparent;
    border: solid 25px rgba(255,255,255,.5);
    box-shadow: inset 0 0 10px rgba(0,0,0,.5);
}