JSFiddle - React, Tailwind, and code Playground
HTML
<h1 class="title-case">You Are a the Coolest</h1>
<h1 class="title-case">Hey You! <span>You are the Coolest!</span></h1>
CSS
h1 {
font-size: 24px;
}
.title-case {
text-transform: uppercase;
}
.first-letter {
font-size: 115%;
}
JavaScript
$('.title-case').each(function(){
$(this).html( capitalize_first_letter( $(this).html() ) );
});
function capitalize_first_letter( str ) {
var words = str.split(' ');
var html = '';
$.each(words, function() {
var first_letter = this.substring(0,1);
html += ( first_letter == first_letter.toUpperCase() ? '<span class="first-letter">'+first_letter+'</span>' : first_letter )+this.substring(1) + ' ';
});
return html;
}