JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores dolor blanditiis, eum iusto maxime officia aut distinctio id eaque odio esse commodi suscipit unde veritatis, possimus sed beatae voluptatem, nam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores dolor blanditiis, eum iusto maxime officia aut distinctio id eaque odio esse commodi suscipit unde veritatis, possimus sed beatae voluptatem, nam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores dolor blanditiis, eum iusto maxime officia aut distinctio id eaque odio esse commodi suscipit unde veritatis, possimus sed beatae voluptatem, nam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores dolor blanditiis, eum iusto maxime officia aut distinctio id eaque odio esse commodi suscipit unde veritatis, possimus sed beatae voluptatem, nam.
</div>
<button>view more</button>

CSS

div {
    font-size: 16px;
    line-height: 20px;
    height: 60px;
    display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
    overflow: hidden;
    transition: .6s;
}
div.active {
    overflow: auto;
    height: 100%;
    -webkit-box-orient: none;  
    -webkit-line-clamp: none;
}

JavaScript

$('button').click(function(){
	$('div').toggleClass('active')
})