JSFiddle - React, Tailwind, and code Playground

by Jonathan Sampson

HTML

<img src="http://secure.gravatar.com/avatar/a84a8714fd33f6676743f9734a824feb?s=250">
<img src="http://secure.gravatar.com/avatar/a84a8714fd33f6676743f9734a824feb?s=250" class="positioned">
<img src="http://secure.gravatar.com/avatar/a84a8714fd33f6676743f9734a824feb?s=250" class="positioned under">
<img src="http://secure.gravatar.com/avatar/a84a8714fd33f6676743f9734a824feb?s=250" class="positioned above">

CSS

body {
  padding: 1em;
  background-color: #FFF;
  width: 375px; margin: auto;
}

img {
  border-radius: 50%;
  width: 150px; margin: 1em;
  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  filter: blur(10px);
}

.positioned {
  position: relative;
}

.under {
  z-index: -1;
}

.above {
  z-index: 2;
}