JSFiddle - React, Tailwind, and code Playground

by vule

HTML

<div id="one"></div> <br />

<div id="two"></div> <br />

<div id="three"></div> <br />

<div id="four"></div> <!-- This one does not have inset shadow -->

CSS

div {
    width: 200px;
    height: 100px;
    background: #ddd;
}

#one {
    -webkit-box-shadow: 1px 1px 5px 1px black;
       -moz-box-shadow: 1px 1px 5px 1px black;
         -o-box-shadow: 1px 1px 5px 1px black;
        -ms-box-shadow: 1px 1px 5px 1px black;
            box-shadow: 1px 1px 5px 1px black;
}

#two {
    -webkit-box-shadow: inset 1px 1px 5px 1px black;
       -moz-box-shadow: inset 1px 1px 5px 1px black;
         -o-box-shadow: inset 1px 1px 5px 1px black;
        -ms-box-shadow: inset 1px 1px 5px 1px black;
            box-shadow: inset 1px 1px 5px 1px black;
}

#three {
   -webkit-filter: drop-shadow(1px 1px 5px black);
      -moz-filter: drop-shadow(1px 1px 5px black);
       -ms-filter: drop-shadow(1px 1px 5px black);
        -o-filter: drop-shadow(1px 1px 5px black);
           filter: drop-shadow(1px 1px 5px black);
}

#four {
    -webkit-filter: inset 1px 1px 5px black;
       -moz-filter: inset 1px 1px 5px black;
        -ms-filter: inset 1px 1px 5px black;
         -o-filter: inset 1px 1px 5px black;
            filter: inset 1px 1px 5px black;
}