JSFiddle - React, Tailwind, and code Playground

HTML

<div id="page">
    <div class="block showmore_one">
        	<h2>Show more block</h2>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et felis rutrum neque aliquam hendrerit eu et massa. Phasellus fermentum, elit nec vulputate vehicula, massa lorem ultrices purus, id pulvinar elit massa et ligula.</p>
    </div>
    <!-- .block -->
    <div class="block showmore_two">
        	<h2>Show more block</h2>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et felis rutrum neque aliquam hendrerit eu et massa. Phasellus fermentum, elit nec vulputate vehicula, massa lorem ultrices purus, id pulvinar elit massa et ligula.</p>
    </div>
    <!-- .block -->
</div>
<!-- #page -->

CSS

#page {
    width:300px;
    margin:0 auto;
    padding-top:50px;
    font-family:Arial, Helvetica, sans-serif;
}
.block {
    border:1px solid #ddd;
    line-height:18px;
    font-size:12px;
    padding:15px;
    margin:0 0 20px 0;
}
.block h2 {
    color:#EF4034;
    border-bottom:2px solid #ddd;
    font-size:20px;
    font-weight:bold;
    padding-bottom:8px;
    margin:0;
    margin-bottom:20px;
}
.block p {
    margin-bottom:20px;
}
/* Shore more styles */
 .showmore_content {
    position:relative;
    overflow:hidden;
}
.showmore_trigger {
    width:100%;
    height:45px;
    line-height:45px;
    cursor:pointer;
}
.showmore_trigger span {
    display:block;
}

JavaScript

/*
 * Show More jQuery Plugin
 * Author: Jason Alvis
 * Author Site: http://www.jasonalvis.com
 * License: Free General Public License (GPL)
 * Version: 1.0.4
 * Date: 21.05.2013
 */
(function(a){a.fn.showMore=function(b){var c={speedDown:300,speedUp:300,height:"265px",showText:"Show",hideText:"Hide"};var b=a.extend(c,b);return this.each(function(){var e=a(this),d=e.height();if(d>parseInt(b.height)){e.wrapInner('<div class="showmore_content" />');e.find(".showmore_content").css("height",b.height);e.append('<div class="showmore_trigger"><span class="more">'+b.showText+'</span><span class="less" style="display:none;">'+b.hideText+"</span></div>");e.find(".showmore_trigger").on("click",".more",function(){a(this).hide();a(this).next().show();a(this).parent().prev().animate({height:d},b.speedDown)});e.find(".showmore_trigger").on("click",".less",function(){a(this).hide();a(this).prev().show();a(this).parent().prev().animate({height:b.height},b.speedUp)})}})}})(jQuery);

$('.showmore_one').showMore({
    speedDown: 300,
    speedUp: 300,
    height: '85px',
    showText: 'Show more',
    hideText: 'Show less'
});

$('.showmore_two').showMore({
    speedDown: 300,
    speedUp: 300,
    height: '105px',
    showText: 'Show more',
    hideText: 'Show less'
});