JSFiddle - React, Tailwind, and code Playground

by MightyPork

HTML

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

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 = Math.min(boxes[i].offsetWidth/2-8,500);
        var height = 20;

        //create pseudo-element
        var myRule = ".pseudo" + i + " { width: " + widthPseudoBox + "; height: " + heightPseudoBox + "; position: absolute;}";
        myStylesheet.insertRule(myRule, myStylesheet.cssRules.length);
        
        var angle=5-Math.min(4, boxes[i].offsetWidth/220);

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

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