JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="no-textshadow">
<li>
    <div class="shadow">Menu Item</div>
    <div class="real">Menu Item</div>
</li>
</ul>

<ul class="textshadow">
<li>
    <div class="shadow">Menu Item</div>
    <div class="real">Menu Item</div>
</li>
</ul>

CSS

li { position: relative; }

.no-textshadow .shadow {  
    color: red;
    position: absolute;
    left: -1px;
    top: -1px; 
    z-index: 100;        
}

.no-textshadow .real {
    position: relative;
    z-index: 200;   
}

.textshadow .shadow {
    display: none;    
}

.textshadow .real {
    text-shadow: -1px -1px 0 red;
}