JSFiddle - React, Tailwind, and code Playground

by GMK Hussain

HTML

<h2>Load More Data on Click</h2>
<div class="portfolio-area" #="allPortfolio">
    	<div data-size="web_all CodeIgniter" class="port-box size col-sm-3"><a href="portfolio-detail">
        	<div class="port-img"><img alt="" src="images/showcase/portfolio-1.jpg"></div>
        	<div class="port-cont text-uppercase"><h4>website Name</h4></div></a>
        </div>

        
        <div data-size="web_all CodeIgniter PHP" class="port-box size col-sm-3"><a href="portfolio-detail">
        	<div class="port-img"><img alt="" src="images/showcase/portfolio-2.jpg"></div>
        	<div class="port-cont text-uppercase"><h4>website Name</h4></div></a>
        </div>
        
        <div data-size="web_all CodeIgniter" class="port-box size col-sm-3"><a href="portfolio-detail">
        	<div class="port-img"><img alt="" src="images/showcase/portfolio-3.jpg"></div>
        	<div class="port-cont text-uppercase"><h4>website Name</h4></div></a>
        </div>
        
        <div data-size="web_all CodeIgniter" class="port-box size col-sm-3"><a href="portfolio-detail">
        	<div class="port-img"><img alt="" src="images/showcase/portfolio-4.jpg"></div>
        	<div class="port-cont text-uppercase"><h4>website Name</h4></div></a>
        </div>
        
        <div data-size="web_all mobile_all CMS_all CodeIgniter" class="port-box size col-sm-3"><a href="portfolio-detail">
        	<div class="port-img"><img alt="" src="images/showcase/portfolio-5.jpg"></div>
        	<div class="port-cont text-uppercase"><h4>website Name</h4></div></a>
        </div>
        
        <div data-size="web_all php" class="port-box size col-sm-3"><a href="portfolio-detail">
        	<div class="port-img"><img alt="" src="images/showcase/portfolio-6.jpg"></div>
        	<div class="port-cont text-uppercase"><h4>website Name</h4></div></a>
        </div>
        
        
        <div data-size="web_all CMS_all CodeIgniter php" class="port-box size col-sm-3"><a href="portfolio-detail">
       ...

CSS

.portfolio-area{
    background-color:yellow;   
    height:200px;
    overflow:hidden;
}
.port-box.size.col-sm-3 {
    border: 1px solid #eee;
    float: left;
    text-align: center;
    width: 24%;
    height:100px;
}


.lnk-btn.load-btn {
    background: #ddd none repeat scroll 0 0;
    border: 1px solid #ccc;
    clear: both;
    float: none;
    margin: 10px auto;
    padding: 20px;
    width: 200px;
}

JavaScript

$('#loadmore').click(function(){
    $('.portfolio-area').css({ 'min-height' : '+=200px' });
});