JSFiddle - React, Tailwind, and code Playground

by Dylan Schadeck

HTML

<div class="box1 jAddShadow"></div>
<div class="box2 jAddShadow"></div>
<div class="box3 jAddShadow"></div>

CSS

.box1 {
    width: 800px;
    height: 400px;
    background: yellow;
    float: left;
    margin: 10px;
}

.box2 {
    width: 300px;
    height: 150px;
    background: green;
    float: left;
    margin: 10px;
}

.box3 {
    width: 200px;
    height: 200px;
    background: red;
    float: left;
    margin: 10px;
}

JavaScript

(function addShadow() {
    var boxes = document.getElementsByClassName('jAddShadow');
    var myStylesheet = document.styleSheets[document.styleSheets.length - 1];

    for (var i = 0; i < boxes.length; i++) {
        var div = document.createElement('div');
        div.className = 'pseudo' + i;
        boxes[i].appendChild(div);

        //set width & height of pseudo-element
        var widthPseudoBox = boxes[i].offsetWidth + 'px';
        var heightPseudoBox = '1px';

        //set width & height of pseudo-classes :before & :after
        var width = ( boxes[i].offsetWidth > 200  ? 100 : boxes[i].offsetWidth/2);
        var height = 20;

        //create pseudo-element
        var myRule = ".pseudo" + i + " { width: " + widthPseudoBox + "; height: " + heightPseudoBox + "; position: absolute;}";
        myStylesheet.insertRule(myRule, myStylesheet.cssRules.length);

        //create pseudo-class :before
        var posBottom = -(boxes[i].offsetHeight)+20;
        var right = 10;
        var myRule = ".pseudo" + i + "::before { content: \"\"; background: transparent;box-shadow: 0px 20px 10px #444; -webkit-box-shadow: 0px 20px 10px #444;-moz-box-shadow: 0px 20px 10px #444; width: " + width + "px; height: " + height + "px; position:absolute; bottom:" + posBottom + "px; right: " + right + "px;-webkit-transform: rotate(4deg);-moz-transform: rotate(4deg);transform: rotate(4deg);z-index: -1; }";
        myStylesheet.insertRule(myRule, myStylesheet.cssRules.length);

        //create pseudo-class :after
        var posBottom = -(boxes[i].offsetHeight)+20;
        var left = 10;
        var myRule = ".pseudo" + i + "::after { content: \"\"; background: transparent;box-shadow: 0px 20px 10px #444; -webkit-box-shadow: 0px 20px 10px #444;-moz-box-shadow: 0px 20px 10px #444; width: " + width + "px; height: " + height + "px; position:absolute; bottom: " + posBottom + "px; left: " + left + "px; -webkit-transform: rotate(-5deg);-moz-transform: rotate(-5deg);transform:...