JSFiddle - React, Tailwind, and code Playground

by trevor_davis

HTML

<h1 data-text="Hey buddy!">Hey buddy!</h1>

CSS

body {
    background: #221E1C;
    margin: 0;
    padding: 20px;
}
h1{
    color: #fff;
    font: 52px/52px Georgia, Times, serif;
    position: relative;
    text-transform: uppercase;
}
h1:after {
    color: #948972;
    content: attr(data-text);
    left: 2px;
    position: absolute;
    top: 2px;
    z-index: -1;
}
.webkit h1::after {
    background: url(http://viget.com/uploads/file/background-clip/bg-heading-diag.png);
    -webkit-background-clip: text;
        
        color: transparent;
        left: 4px;
        
        top: 4px;
        
 }

JavaScript

$(document).ready(function() {
            if($.browser.safari || $.browser.webkit) {
                $('html').addClass('webkit');
            }    
        });