JSFiddle - React, Tailwind, and code Playground

by trevor_davis

HTML

<h1 data-text="Blerg">Blerg</h1>

CSS

body {
    padding: 50px;
}
h1 {
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #91a9cb));
    background-image: -webkit-linear-gradient(#ffffff,#91a9cb);
    background-image: -moz-linear-gradient(#ffffff,#91a9cb);
    background-image: -o-linear-gradient(#ffffff,#91a9cb);
    background-image: -ms-linear-gradient(#ffffff,#91a9cb);
    background-image: linear-gradient(#ffffff,#91a9cb);
    color: white;
    font: 80px/80px TrumpGothicEastBold, Helvetica, Arial, sans-serif;
    margin-bottom: 23px;
    position: relative;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
}
h1:after {
    background: none;
    display: inline-block;
    content: attr(data-text);
    left: 0;
    position: absolute;
    text-shadow: 6px 6px 9px rgba(0, 0, 0, 0.33);
    top: 0;
    width: 100%;
    z-index: -1;
}