JSFiddle - React, Tailwind, and code Playground
HTML
<h1 class="site-title">RheTitle</h1>
CSS
.site-title {
font-family: fontLogo;
font-size: 60px;
font-weight: bold;
line-height: 1;
margin: 0;
padding: 58px 0 10px;
}
.site-title > span {
font-size: 80px;
display: inline-block;
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
}
JavaScript
var title = document.querySelector('.site-title');
var fletter = title.innerHTML.charAt(0);
title.innerHTML = title.innerHTML.replace(fletter, '<span>'+fletter+'</span>');