JSFiddle - React, Tailwind, and code Playground

by darcyclarke

HTML

<img src="http://www.w3.org/html/logo/img/class-header-semantics.jpg" alt="Semantics" class="fade">


<div class="red"></div>

CSS

.fadeBefore {
   -webkit-box-shadow: 0 0 10px #000; 
   -webkit-border-radius: 2.5em;
    display: block;
    float: left;
    overflow: hidden;
    border: 5px inset #fff;
}

.fadeBefore img {
 float: left; 
}

.red {
    float: left;
    display: block;
   clear: both;
    width: 250px;
  height: 250px;
  border: inset 3px blue;
   background: red; 
}

JavaScript

$(".fade").each(function(){
   $(this).wrap("<div class='fadeBefore'>"); 
});