JSFiddle - React, Tailwind, and code Playground

HTML

<span class="sarcasm">GroĂźartige Idee!
&lt;/sarcasm&gt;</span>

CSS

.sarcasm-letter {
    display: inline-block;
    /* see https://developer.mozilla.org/en-US/docs/CSS/transform */
    -webkit-transform:  skewx(20deg);
          -o-transform: skewx(20deg);
             transform: skewx(20deg);
}

JavaScript

$( document ).ready(function() {
    $( '.sarcasm' ).html( function ( ) {
        letters = $( this ).text( ).replace( / /g, '\u00A0' ).split( '' );
        newhtml = "";
        for (var i = 0; i < letters.length; i++) {
            if (letters[ i ] != "\n") {
                newhtml += "<span class=\"sarcasm-letter\">" + letters[ i ] + "</span>";
            } else {
                newhtml += "<br/>";
            }
        }
        return newhtml;
    } );
} );