JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bkg">
<h1 class="glow"> Big glow heading </h1>
<h2 class="glow"> Medium glow heading </h2>

    <h1 class="chroma-glow"> Big chroma glow heading </h1>
<h2 class="chroma-glow"> Medium chroma glow heading </h2>
    
<h1 class="shadow"> Big shadow heading </h1>
<h2 class="shadow"> Medium shadow heading </h2>

<h1 class="chroma-shadow"> Big chroma shadow heading </h1>
<h2 class="chroma-shadow"> Medium chroma shadow heading </h2>

    <h1 class="blur"> Big blur heading </h1>
    <h2 class="blur"> <span class="bkg2">Medium blur heading</span> </h2>
    <h1 class="chroma-blur"> Big chroma blur heading </h1>
    <h2 class="chroma-blur"> <span class="bkg2">Medium chroma blur heading</span> </h2>    

    <p class="glow"> Seriously, don't add glow, drop shadow or decorative effects to paragraph text. Every time you add decoration to extended passages of text, a kitten trying to read the text squints, rubs her eyes with a paw with the claws accidentally extended, and cuts her eyes. Would you cut a kitten's eyes? Then don't use decorative effects on paragraph text.</p>
    <p class="chroma-glow"> Seriously, don't add chroma glow, drop shadow or decorative effects to paragraph text. Every time you add decoration to extended passages of text, a kitten trying to read the text squints, rubs her eyes with a paw with the claws accidentally extended, and cuts her eyes. Would you cut a kitten's eyes? Then don't use decorative effects on paragraph text.</p>
</div>

CSS

.bkg {
    background: #aeaeae;
    padding: 14px 16px 34px;    
}
.bk2 {
    background: #dddddd;
}
h1 {
  font-size: 28px;
  font-weight: bold;
  margin: 16px 0;
}
.glow {
  filter: progid:DXImageTransform.Microsoft.Glow(color=ffffff,strength=4);  
  text-shadow: 0 0 4px #ffffff;
}
.chroma-glow {
    background-color: #dfdfdf; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Chroma(Color=#dfdfdf)progid:DXImageTransform.Microsoft.Glow(color=ffffff,strength=4)";
  text-shadow: 0 0 4px #ffffff;
}
.blur {
  color: #ffffff;
  filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=4);
  text-shadow: 0 0 4px #ffffff;
}
.shadow {
 filter: progid:DXImageTransform.Microsoft.Shadow(direction=135,strength=2,color=ffffff);
}
.chroma-shadow {
    background-color: #dfdfdf;
    -ms-filter: "progid:DXImageTransform.Microsoft.Chroma(Color=#dfdfdf)progid:DXImageTransform.Microsoft.Shadow(direction=135,strength=2,color=ffffff)";
}
.chroma-blur {
    background-color: #dfdfdf;
    color: #ffffff;
    -ms-filter: "progid:DXImageTransform.Microsoft.Chroma(Color=#dfdfdf)progid:DXImageTransform.Microsoft.Blur(pixelradius=4)";
}
h2 {
  font-size: 24px;
  margin: 16px 0;
}
p {
  margin: 7px 0;
}