JSFiddle - React, Tailwind, and code Playground

by kenyboy9

HTML

<div class="leaders">
 <div class="two_columns_50_50 clearfix">
 <div class="column1"><div class="column_inner">
 <div class="two_columns_33_66 clearfix">
 <div class="column1">
 <div class="column_inner">
 <div class="flip_image_holder flip no" data-delay="500"><a href="" target="">
 <div class="flip_image front">
 <img src="http://placehold.it/150x150" alt="">
 </div>
 <div class="flip_image back" style="background-color: ;">
 <div class="flip_image_text">
 <div class="flip_image_text_inner">
 <h4>Ben Pietch</h4>
 </div></div></div></a></div><p></p>
 <p></p></div></div><br>
 <div class="column2"><div class="column_inner"><p></p>
 <p><span style="color: #e7332a; font-size: 18pt;">Ben Pietch</span></p>
 <p><span style="font-size: 14pt;">Bike Mechanic</span><br>
 <span style="font-size: 14pt;">CEO Bike Mechanic Inc</span></p>
 <p><span style="font-size: 14pt;">Lorem ipsum dolor sit amet, consectetur </span></p>
 <p></p></div></div></div><p></p>
 <p></p></div></div>
 <div class="column2"><div class="column_inner"><p></p>
 <p></p><div class="two_columns_33_66 clearfix"><div class="column1"><div class="column_inner"><p></p>
 <p></p><div class="flip_image_holder flip no" data-delay="500"><a href="" target=""><div class="flip_image front"><img src="http://placehold.it/150x150" alt=""></div><div class="flip_image back" style="background-color: ;"><div class="flip_image_text"><div class="flip_image_text_inner"><h4>James Norton</h4></div></div></div></a></div><p></p>
 <p></p></div></div><br>
 <div class="column2"><div class="column_inner"><p></p>
 <p><span style="color: #e7332a; font-size: 18pt;">james Norton</span></p>
 <p><span style="font-size: 14pt;">Director</span><br>
 <span style="font-size: 14pt;">CEO Norton Direct</span></p>
 <p><span style="font-size: 14pt;">Lorem ipsum dolor sit amet, consectetur </span><br>
 </p></div></div></div><p></p>
 <p></p></div></div></div></div></br>
 <center><a id="showMore" href="#">Show More</a></center>

CSS

.two_columns_50_50 {
    width: 100%;
}

.leaders > .two_columns_50_50 > .column1 {
    float: left;
    width: 48%;
    border: 1px solid #d9dada;
    margin: 0px;
    border-radius: 6px;
    margin-right: 30px;
    margin-bottom: 20px;
}

.two_columns_50_50>.column1>.column_inner {
    padding: 0 20px 0 0;
}

.two_columns_33_66 {
    width: 100%;
}

.two_columns_33_66>.column1 {
    width: auto;
    float: left;
}

.two_columns_33_66>.column2 {
    width: 66.66%;
    float: left;
}

.two_columns_33_66 > .column2 > .column_inner {
    padding: 0;
}

.leaders > .two_columns_50_50 > .column2 {
    float: left;
    width: 49%;
    border: 1px solid #d9dada;
    margin: 0px;
    border-radius: 6px;
}

JavaScript

var $j = jQuery;

var itemsCount = 0,
  itemsMax = $j('.leaders div').length;
$j('.leaders div').hide();

function showNextItems() {
  var pagination = 4;

  for (var i = itemsCount; i < (itemsCount + pagination); i++) {
    $j('.leaders div:eq(' + i + ')').show();
  }

  itemsCount += pagination;

  if (itemsCount > itemsMax) {
    $j('#showMore').hide();
  }
};

showNextItems();

$j('#showMore').on('click', function(e) {
  e.preventDefault();
  showNextItems();
});