JSFiddle - React, Tailwind, and code Playground

by earl3s

HTML

<div>
<h1 class="depth" title="This is some depth text">This is some depth text</h1>

<h1 class="depth green" title="This is some depth text">This is some depth text</h1>

<h1 class="depth orange" title="This is some depth text">This is some depth text</h1>

<h1 class="depth red" title="This is some depth text">This is some depth text</h1>
</div>

CSS

div {
    background: #fff;
    background: -webkit-linear-gradient(top, #1a82f7, #eee);
    height: 100%;
    padding:10px;
            
}

.depth {
    display: block;
    color: #000;
    font: bold 80px Rockwell;
    position: relative;
}

.depth:before, .depth:after {
    content: attr(title);
    color: rgba(255,255,255,.15);
    position: absolute;
}

.depth:before { top: 1px; left: 1px }
.depth:after  { top: 2px; left: 2px }

.green {
    color: #739636;
}

.orange {
    color: #DD8E26;
}

.red {
    color: #CC1D2A;
}