JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<span data-splittext="Split">Split</span>

SCSS

@import url(http://fonts.googleapis.com/css?family=Raleway:400,900,300);

html,
body{
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    text-align: center;
    background-color: #fff;
}

[data-splittext]{
    display: inline-block;
    position: relative;
    color: #55ba9b;
    font-family: 'Raleway', sans-serif;
    font-weight: 900;
    font-size: 15vw;
    line-height: 1;
    transform: translateX(0) translateY(0);
    transition: transform 300ms;
    &:after,
    &:before{
        content: attr(data-splittext);
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        color: #55ba9b;
        height: 50%;
        overflow: hidden;
    }
    &:before{
        color: #fff;
        text-shadow: 0 -1px 0 #fff, -1px 0 0 #fff, 1px 0 0 #fff; // AA feather fix
    }
    &:after{
        transform: translateX(0) translateY(0);
        transition: transform 300ms;
    }
    &:hover{
        transform: translateX(10%) translateY(10px);
        &:after{
            transform: translate(-20%) translateY(-20px);
        }
    }
}

JavaScript

/**
 * SPLIT TEXT
 */