JSFiddle - React, Tailwind, and code Playground

by Zareh Geertjes

HTML

<h1>Do YOU<br>want a<br>Taste of<br>this?</h1>

SCSS

@import url(//fonts.googleapis.com/css?family=Montserrat:700);

h1{
  width: 300px;
  font-size: 60px;
  line-height: 60px;
  font-family: 'Montserrat';
  color: #fff;   
  span{
   	background: #e53228;
	  padding: 0px 10px;
  }
}

JavaScript

(function($){
	$.fn.inlinebackgrounds = function() {
		$.each(this, function(i,t) {
			var split = $(t).html().split('<br>');
			var output = '';
			$.each(split, function(i,o){
				output += '<span>'+o+'</span>';
				if (i < (split.length - 1)) {
					output += '<br>';
				}
			});
			$(t).html(output);
		});
	}
})(jQuery);


$(document).ready(function(){
  $('h1').inlinebackgrounds();
});