JSFiddle - React, Tailwind, and code Playground

HTML

<span id="one">Attempt 1</span>
<span id="two">Attempt 2</span>
<span id="three">Attempt 3</span>
<span id="four">Attempt 4</span>
<span id="five">Attempt 5</span>

CSS

body, html {
  background-color: #111;
}

span {
  display: block;
  color: #EEE;
}

#one {
  filter: progid:DXImageTransform.Microsoft.Shadow(color=#FF0000,direction=45);
}

#two {
  filter: Shadow(Color=red, Direction=130, Strength=1);  
}

#three {
  filter: dropshadow(color=#a8aaad, offx=1, offy=1);
}

#four {
  filter: progid:DXImageTransform.Microsoft.Chroma(color='white') progid:DXImageTransform.Microsoft.Alpha(opacity=100) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=-1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=-1);
}

#five {
  filter: chroma(color=#cacbcf) progid:DXImageTransform.Microsoft.dropshadow(color=#60000000, offX=2, offY=2);
}