JSFiddle - React, Tailwind, and code Playground

HTML

<div class='split-color'>Two is better than one.</div>

CSS

body {
    font-size: 75px;
    text-align: center;
    font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
}

.split-color > span {
    white-space: pre-line;
    position: relative;
    color: #409FBF;
}

.split-color > span:before {
    content: attr(data-content);
    pointer-events: none;
    position: absolute;
    overflow: hidden;
    color: #264A73;
    width: 50%;
    z-index: 1;
}

JavaScript

function wrapString(str) {
  var output = [];
  str.split('').forEach(function(letter) {
    var wrapper = document.createElement('span');
    wrapper.dataset.content = wrapper.innerHTML = letter;
    output.push(wrapper.outerHTML);
  });

  return output.join('');
}

window.onload = function() {
    var el  = document.querySelector('.split-color'),
        txt = el.innerHTML;
    
    el.innerHTML = wrapString(txt);
}