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 { 
    /*
    max-width: 500px;
    width: 90%;
    */
    width: 500px;
    margin: 4.5em auto;
}

/* 
img { 
    max-width: 100%;
    height: auto;
}
*/

figure { 
     position: relative;
}

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

JavaScript

// img via @chriscoyier's flickr stream