JSFiddle - React, Tailwind, and code Playground

HTML

<div class="article expand_collapse_2">
    <h3>Loremitis!</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Vestibulum laoreet, <b>nunc eget laoreet sagittis</b>,
    quam <em>ligula sodales orci, congue imperdiet</em> eros tortor ac lectus.</p>
    <p>Duis <i>eget nisl orci.<br/> Aliquam mattis purus non mauris
    blandit id luctus felis convallis.
    Integer varius <span>egestas vestibulum</span>.
    Nullam a </i>dolor arcu, ac tempor elit. Donec.</p>
</div>

CSS

body {
    font-family: Calibri, Arial;
    margin: 0px;
    padding: 0px;
}

a {
    color: #0254EB
}

a:visited {
    color: #0254EB
}

.article {
    width: 400px;
    background-color: #f0f0f0;
    margin: 10px;
    padding:5px;
    position:relative;
}

a.morelink,
a.lesslink {
    text-decoration:none;
    outline: none;
}

.expand_collapse_2 .ellipsis:after {
	margin-bottom:1em;
	content:" ";
	display:block;
}

.hidden {
	display:none;
}

JavaScript

/**
 * jQuery plugin gb_readmore with more/less link and numberOfChars
 * (c) 2014 by NaN (Georg Busch)
 */
(function($) {

    $.fn.gb_readmore = function(options) {
    
        var options = $.extend({
                numberOfChars: 100,
                ellipsisText: '...',
                moreText: 'more',
                lessText: 'less',
                cleanUp: true
            }, options);
        
        /**
         * Function found at http://jsperf.com/html-truncate-by-javascript/3
         * (adapted from HTML-Truncate Utility)
         */
        function insertEllipsis(str, maxLength) {
            var content = '',         // traced text
                total   = 0,          // record how many characters we traced so far
                matches = true,
                result  = '', 
                index   = 0;
            while(matches) {
                matches = /<\/?\w+(\s+\w+="[^"]*")*>/g.exec(str);
                if(!matches) {
                    index = str.length;
                }
                else {
                    result = matches[0],
                    index  = matches.index;
                }
                // insert ellipsis
                if (total + index > maxLength) {
                    content += str.substring(0, maxLength - total);
                    content += '<span class="ellipsis">' + options.ellipsisText + '</span>';
                    content += str.substring(maxLength - total);
                    break;
                } else {
                    total   += index;
                    content += str.substring(0, index);
                }
                content += result;
                str = str.substring(index + result.length);
            }
            return content;
        }
        
        return this.each(function(){
            
            var $this      = $(this),
                $wrapper   = $this.wrapInner('<div class="wrapper" />').children('.wrapper').eq(0),
                $ellipsis  =...