JSFiddle - React, Tailwind, and code Playground

by Сергей Тарасевич

HTML

<div class="spanner">D0Gmatist</div>
<div class="spanner">маркет / блог</div>

CSS

body {
    background: #5092CA;
}

.spanner {
    position: relative;
}

.spanner span {
    color: #5D9DD4;
    text-shadow: -2px 2px 9px #062F53, 0 -1px 0 #AED5F7;
    position: relative;
    font-size: 90px;
    font-family: fantasy;
    font-weight: bold;
    top: 0;
}

JavaScript

$('.spanner').each(function(index) {
	var characters = $(this).text().split(""),
		$this = $(this);
	$this.empty();
	$.each(characters, function(i, el) {
		var a = (i + 1),
			b = 0 + (i * 5);
			if ( b > 0 ) {
				b = '-'+b;
			}
		$this.append('<span class="single_letter_' + a + '" style="left:' + b + 'px;z-index:' + a + '">' + el + '</span>');
	});
});