JSFiddle - React, Tailwind, and code Playground

HTML

HalfStyle On Github <a href="http://github.com/arbelh/HalfStyle">http://github.com/arbelh/HalfStyle</a>
<hr/>
<p>Single Characters:</p>
<span class="halfStyle" data-content="A">A</span>

<span class="halfStyle" data-content="B">B</span>

<span class="halfStyle" data-content="C">C</span>

<span class="halfStyle" data-content="D">D</span>

<hr/>
<p>Automated on any text:</p>
<span class="textToHalfStyle">…Or how we crowbarred ‘HalfStyle’ code into being ‘PeelingStyle’</span>
<hr/>
<p><a href="http://experimental.samtremaine.co.uk/half-style/">Peeling Style Homepage</a></p>
HalfStyle On Github <a href="http://github.com/arbelh/HalfStyle">http://github.com/arbelh/HalfStyle</a>

CSS

/*!
 * HalfStyle
 * Copyright 2014 Arbel Hakopian
 * Licensed under MIT (https://github.com/arbelh/HalfStyle/blob/master/license.md)
 */
/* HalfStyle improvement by @SamTremaine on StackOverflow.com */
.halfStyle {
    position: relative;
    display: inline-block;
    font-size: 68px;
    color: rgba(0, 0, 0, 0.8);
    overflow: hidden;
    white-space: pre;
    transform: rotate(4deg);
    text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.3);
}
.halfStyle:before { /* creates the left part */
    display: block;
    z-index: 1;
    position: absolute;
    top: -0.5px;
    left: -3px;
    width: 100%;
    content: attr(data-content);
    overflow: hidden;
    pointer-events: none;
    color: #FFF;
    transform: rotate(-4deg);
    text-shadow: 0px 0px 1px #000;
}

JavaScript

/*!
 * HalfStyle
 * Copyright 2014 Arbel Hakopian
 * Licensed under MIT (https://github.com/arbelh/HalfStyle/blob/master/license.md)
 */
jQuery(function($) {
    var text, chars, $el, i, output;

    // Iterate over all class occurences
    $('.textToHalfStyle').each(function(idx, el) {
        $el = $(el);
        text = $el.text();
        chars = text.split('');

        // Set the screen-reader text
        $el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + text + '</span>');

        // Reset output for appending
        output = '';

        // Iterate over all chars in the text
        for (i = 0; i < chars.length; i++) {
            // Create a styled element for each character and append to container
            output += '<span aria-hidden="true" class="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';
        }

        // Write to DOM only once
        $el.append(output);
    });
});