JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<h1 class="demo-1" data-text="Oh heeey!">Oh heeey!</h1>

CSS

body {
    background: #143666;
    margin: 0;
    padding: 20px;
    text-transform: uppercase;
}
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);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        color: #fff;
    font: bold 60px/60px Tahoma, Geneva, sans-serif !important;
    position: relative;
}
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;
    z-index: -1;
}