JSFiddle - React, Tailwind, and code Playground

by denniswaltermartinez

HTML

<p>filter dropshadow will follow the dashed lines.</p>
<div class="box filter-shadow">filter: drop-shadow</div>

<p>box shadow will follow the rectangular shape.</p>
<div class="box box-shadow">box-shadow</div>

CSS

.box {
    margin: 50px;
    width: 100px;
    height:100px;
    border: 10px dashed red;
}
.filter-shadow {
    -webkit-filter: drop-shadow(0 1px 10px rgba(0, 0, 0, .5));
}
.box-shadow {
    box-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}