JSFiddle - React, Tailwind, and code Playground

by kevee

HTML

<div class="unreadable">I'm still hard to read</div>    

<div class="readable">I'm much more readable</div>
<!--note the readable shadow is ugly, but you get the idea-->

CSS

div { 
    margin-bottom: 10px;
    color: #fff;
    background: #eee;
    padding: 15px;
}

.unreadable {
    text-shadow: 0 0 1px #000;
}

.readable {
    text-shadow: 3px 3px #000, 2px 2px #000, 1px 1px #000, -3px 3px #000, -2px 2px #000, -1px 1px #000, 3px -3px #000, 2px -2px #000, 1px -1px #000, -3px -3px #000, -2px -2px #000, -1px -1px #000;   
}