JSFiddle - React, Tailwind, and code Playground

HTML

<label>input string: <input type="text" id="inputString" placeholder="a sequence of characters" /></label>
<p id="outputValue"></p>
<button id="findBtn">Find Longest Sequence</button>

JavaScript

var findLongest = function (inputString) {
    var stringArray = inputString.split('');

    var spacedString = stringArray.reduce(function (prev, curr) {
        var lastChar = prev.charAt(prev.length - 1);

        if(lastChar !== curr) {
            return prev + ' ' + curr;
        } else {
            return prev + curr;
        }
    });
    
    var brokenArray = spacedString.split(' ').sort(function (a, b) {
        return b.length - a.length;
    });

    var resultString = brokenArray[0];

    return [resultString.charAt(0), resultString.length];
};

document.getElementById('findBtn').onclick = function () {
    var outputEl = document.getElementById('outputValue')
      , inputString = document.getElementById('inputString').value;

    if(inputString.length) {
        outputEl.innerHTML = findLongest(inputString);
    }
};