JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<p>Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye <span class="highlight">He's got style, a groovy style, and a car that just won't stop. When the going gets tough, he's really rough, with a Hong Kong Phooey chop. Hong Kong Phooey, number one super guy.</span> Hong Kong Phooey, quicker than the human eye. Hong Kong Phooey, he's fan-riffic!</p>
<p>Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye <span class="highlight">He's got style, a groovy style, and a car that just won't stop. When the going gets tough, he's really rough, with a Hong Kong Phooey chop. Hong Kong Phooey, number one super guy.</span> Hong Kong Phooey, quicker than the human eye. Hong Kong Phooey, he's fan-riffic!</p>
<p>Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye <span class="highlight">He's got style, a groovy style, and a car that just won't stop. When the going gets tough, he's really rough, with a Hong Kong Phooey chop. Hong Kong Phooey, number one super guy.</span> Hong Kong Phooey, quicker than the human eye. Hong Kong Phooey, he's fan-riffic!</p>

CSS

p {
    border: 1px solid #000;
    margin: 0 auto 1em auto;
    width: 80%;
}
p:nth-child(2) {
    width: 50%;
}
p:nth-child(3) {
    width: 30%;
}
p span.highlight {
    color: #f90;
}
span.highlight .line:first-child {
    color: green;
}
span.highlight .line:last-child {
    color: red;
}

JavaScript

(function ($) {
    $.fn.lines = function (opts) {
        var s = $.extend({
            'lineClass' : 'line'
        },opts);
        return this.each(function () {
            var self = this,
                $self = $(self),
                $line,
                $prev;
            $self.find('.' + s.lineClass).contents().unwrap();
            $self.html(function (i, h) {
                return h.replace(/(\b[\w']+\b)/g, '<span class="' + s.lineClass + '">$1</span>');
            });
            
            $self.find('.line + .line').each(function(i, el){
                $line = $(this),
                $prev = $line.prev('.line');
                if ($line.offset().top === $prev.offset().top) {
                    $prev.append(el.previousSibling, $line.contents());
                    $line.remove();
                }
            });
        });
    };
})(jQuery);

$(window).on('resize', function(){
    $('p .highlight').lines();
});
$(document).ready(function(){
    $('p .highlight').lines();
});

$('.highlight').on('click', '.line:first-child', function(e){
    console.log(this, e.target);
    $(this).css('color','blue');
});