JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main" role="main">

        <p>
Try to see if there's any way that you can take an <h3>input type='text'</h3><br /> and modify just one letter of the string inside the input -<br /> for example the first letter of the input to be red colour. <br /><br />Using javascript or css or anything you can to make it happen (without an overly ridiculous hack)</p>
        <input type="text" value="peanut butter">
        
        <pre>i can't touch the styles.. haven't figured it out.. but I can edit the string itself.. <br /><Br />console.log:<br /><br /></pre>

    </div>

JavaScript

function PlaywithFirstLetter (source){
var firstLetter = source.attr('value');
            $('pre').append(('original val: '+firstLetter+'...<br />'));
            
            var str = firstLetter.substring(1);
            
            
            //Let's act on the first letter
            firstLetter = firstLetter.charAt(0).toUpperCase();
            $('pre').append(('sliced, first letter & capitalized: '+firstLetter+'...<br />'));

            
            str = str.toLowerCase();
            $('pre').append(('sliced string: '+str+'...<br />'));

            
            firstLetter += str;
            $('pre').append(('painting it blue and populating it with our two vars<br />'));
            source.attr('value',firstLetter).css('color','#blue');;

}

$(document).ready(function() {
/*place jQuery actions here*/
    $('#main input').each(function(){
        PlaywithFirstLetter($(this));        
    });
    
    
    
});