JSFiddle - React, Tailwind, and code Playground

by Joseph Tate

HTML

<div id="shadow1">
o hi
</div>

<br>
<br>

<div  id="shadow2">
o hi
</div>

<br>
<br>

<div  id="shadow3">
o hi
</div>

<br>
<br>
<div>
o hi
</div>

<br>
<br>

CSS

div {
  width: 100px;
  height: 100px;
  margin: 15px;
}

#oris-card {
  width: 100px;
/* box-shadow: 0 3px 1px -2px rgba(0,0,0,.14), 0 2px 2px 0 rgba(0,0,0,.098), 0 1px 5px 0 rgba(0,0,0,.084);   
 */
 /* https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow */
 box-shadow: 0px 1px 7px -2px red, 0px 1px 7px -2px blue;   
}

#shadow1 {
  box-shadow: 0 3px 1px -2px rgba(0,0,0,.14);
}

#shadow2 {
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.098);

}

#shadow3 {
  box-shadow: 0 1px 5px 0 rgba(0,0,0,.084);

}