JSFiddle - React, Tailwind, and code Playground

by Sourabh Singh Rathore

HTML

<div id="content">

    <div class="shadow">this is the first div</div>
    
    <br><br>
    
    <div class="shadow rotate"><div class="workaround">this is the second div</div></div>
    
    <br><br>
    
    <div class="shadow rotate"><img src="//www.google.com/logos/2012/Teachers_Day_Alt-2012-hp.jpg" width="300" height="116"></div>
    
</div>

CSS

.workaround{
    height: 100%;
    width: 100%;
    background-color: #ededed;
}

#content {margin:20px;}
.shadow {border:1px solid #ccc;position:relative;width:300px;height:116px;background-color:#ededed;}

.shadow:before, .shadow:after {            
    bottom:13px;
                    content: "";
                    position: absolute;
                    z-index: -1;
                    -ms-transform: rotate(-11deg);
                    -webkit-transform: rotate(-11deg); /* Safari and Chrome */
                    -o-transform: rotate(-11deg); /* Opera */
                    -moz-transform: rotate(-11deg); /* Firefox */
                    box-shadow: 0 15px 5px rgba(0, 0, 0, 0.2);
                    height: 50px;
                    max-width: 50%;
                    width: 50%;
                    left:3px;
                }
                .shadow:after {
                    
                    -ms-transform: rotate(11deg); /* IE 9 */
                    -webkit-transform: rotate(11deg); /* Safari and Chrome */
                    -o-transform: rotate(11deg); /* Opera */
                    -moz-transform: rotate(11deg); /* Firefox */
                    left: auto;
                    right: 2px;
                }

.rotate{                    -ms-transform: rotate(4deg);
                    -webkit-transform: rotate(4deg); /* Safari and Chrome */
                    -o-transform: rotate(4deg); /* Opera */
                    -moz-transform: rotate(4deg); /* Firefox */
}