JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.khacreationusa.com/leasestar/jquery/js/jquery.organictabs.js"></script>
<script src="http://www.khacreationusa.com/leasestar/jquery/js/expander.min.js"></script>
<div id="page-wrap">
    <div id="tab">
        <ul class="nav">
            <li class="nav-one"><a href="#tab1" class="current">Featured</a>
            </li>
            <li class="nav-two"><a href="#tab2">Core</a>
            </li>
            <li class="nav-three"><a href="#tab3">jQuery</a>
            </li>
            <li class="nav-four last"><a href="#tab4">Classics</a>
            </li>
        </ul>
        <div class="list-wrap">
            <div id="tab1">
                <div class="readmore">Nam tincidunt tempus justo sed aliquam. Sed rhoncus, augue at hendrerit
                    semper, lectus leo varius ndivla, sit amet laoreet sem quam in ipsum. Aenean
                    eget nunc a arcu ornare consequat. Mauris arcu elit, dictum sed aliquet
                    sed, blandit vel arcu. Aliquam id ligdiva justo. Donec et magna id risus
                    hendrerit mattis vitae sed leo. Donec molestie condimentum venenatis. In
                    imperdiet, diam vel vehicdiva fringilla, dolor massa condimentum dolor,
                    ac consequat dui augue sit amet ndivla. Vestibdivum ante ipsum primis in
                    faucibus orci luctus et divtrices posuere cubilia Curae; Ndivla facilisi.
                    Vestibdivum ante ipsum primis in faucibus orci luctus et divtrices posuere
                    cubilia Curae; Ndivlam quis porttitor risus. Vestibdivum felis elit, accumsan
                    non divtrices vel, posuere at mi. Integer mollis turpis vitae magna aliquet
                    tincidunt. Donec nec diam eu odio venenatis faucibus. Donec convallis placerat
                    mauris vitae vdivputate.</div>
            </div>
            <div id="tab2" class="hide">
                <div class="readmore">Sed interdum sem id sem ultrices eget...

CSS

* {
	margin: 0;
	padding: 0;
}
html {
	overflow-y: scroll;
}
a {
	text-decoration: none;
}
a:focus {
	outline: 0;
}
p {
	font-size: 15px;
	margin: 0 0 20px 0;
}
#page-wrap {
	width: 440px;
	margin: 80px auto;
}
/* Generic Utility */
.hide {
	position: absolute;
	top: -9999px;
	left: -9999px;
}
#tab .list-wrap {
	background: #eee;
	padding: 10px;
	margin: 0 0 15px 0;
}
#tab ul {
	list-style: none;
}
#tab ul li a {
	display: block;
	border-bottom: 1px solid #666;
	padding: 4px;
	color: #666;
}
#tab ul li a:hover {
	background: #333;
	color: white;
}
#tab ul li:last-child a {
	border: none;
}
#tab .nav {
	overflow: hidden;
}
#tab .nav li {
	width: 97px;
	float: left;
	margin: 0 10px 0 0;
}
#tab .nav li.last {
	margin-right: 0;
}
#tab .nav li a {
	display: block;
	padding: 5px;
	background: #666;
	color: white;
	font-size: 95%;
	text-align: center;
	border: 0;
}
#tab li a.current, #tab li a.current:hover {
	background-color: #eee !important;
	color: black;
}
#tab .nav li a:hover, #tab .nav li a:focus {
	background: #999;
}

JavaScript

$(document).ready(function () {
    $(function () {
        $("#tab").organicTabs({
            "speed": 250
        });
    });

    $(".readmore").each(function () {
        if ($(this).text().length > 200) {

                $('div.readmore').expander({
                    slicePoint: 200,
                    expandSpeed: 1000,
                    collapseSpeed: 1000,
                    expandText: 'Read More',
                    userCollapseText: 'Hide Text'
                });
        }
    });
});