JSFiddle - React, Tailwind, and code Playground

by Akshay U

HTML

<link href="https://fonts.googleapis.com/css?family=Bowlby+One+SC" rel="stylesheet">
<div class="text">
    <span class="pseudo">Sliced</span>
    <span data-text="Sliced" class="part"></span>
    <span data-text="Sliced" class="part"></span>
</div>

CSS

body{
  font-family: 'Bowlby One SC', cursive;
}
.text {
    position: relative;
    display: inline-block;
    font-size: 3em;
    padding-right: 5px;
}

.text .pseudo {
    opacity: 0;
}

.text .part {
    width: 100%;
    position: absolute;
    height: 50%;
    overflow: hidden;
    top: 0;
}

.text .part:after {
    content: attr(data-text);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    text-shadow: 2px 2px #ff0000, -2px -2px yellow;
}

.text .part + .part {
    top: 50%;
}

.text .part + .part:after {
    top: -100%;
    left: 3px;
}