JSFiddle - React, Tailwind, and code Playground

by notme

HTML

<div class="node-title din">
    <div class="node-title-text">
        <a href="#">
            <span class="splitted-title splitted-title-0">Lorem</span>
            <span class="splitted-title splitted-title-1">Ipsum</span>
            <span class="splitted-title splitted-title-2">SetLorem</span>
            <span class="splitted-title splitted-title-3">Dolor</span>
            <span class="splitted-title splitted-title-4">EtLorem</span>
            <span class="splitted-title splitted-title-5">Lorem</span>
            <span class="splitted-title splitted-title-6">Lorem</span>
            <span class="splitted-title splitted-title-7">LoremLoremLorem</span>
        </a>
    </div>
</div>

CSS

div.node-title /* Node title */ {
    background:#d70019;
    background-size:100%;
    font-size: 1.6em;
    text-transform: uppercase;
    color:#fff;
    text-shadow:1px 1px 1px #000;
    display: inline;
    box-shadow: inset 0 0 20px #888;
    -webkit-box-shadow: inset 0 0 20px #333;
    -moz-box-shadow: inset 0 0 20px #333;
}

div.node-title-text {

    display: inline;
}

div.node-title-text a:link, div.node-title-text a:visited {
    color:#fff;
    text-decoration:none;
    line-height: 1.16em;
}

div.node-title .splitted-title {
    white-space: nowrap;
}

div.node-title .splitted-title.left {
    padding-left:20px;
}

div.node-title .splitted-title.right {
    padding-right:20px;
}

JavaScript

$('.node-title-text').each(function() {
                var node_titles = $('.splitted-title', this);
                node_titles.each(function(index) {
                    if ($(this).position().left == 10) {
                        $(this).addClass('left');
                        $(this).prev().addClass('right');
                    }
                    
                    if (index == (node_titles.length - 1 )) {
                        $(this).addClass('right');
                    }
                });
            });