JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/jquery.lazy/1.7.3/jquery.lazy.min.js"></script>
<ul id="header">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>
<div id="content">
  <div style="display: block;">
    <img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+one: image 1" />
    <img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+one: image 2" />
    <img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+one: image 3" />
    <img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+one: image 4" />
    <img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+one: image 5" />
  </div>
  <div>
    <img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+two: image 1" />
    <img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+two: image 2" />
    <img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+two: image 3" />
    <img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+two: image 4" />
    <img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+two: image 5" />
  </div>
  <div>
    <img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+three: image 1" />
    <img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+three: image 2" />
    <img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+three: image 3" />
    <img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+three: image 4" />
    <img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+three: image 5" />
  </div>
</div>

CSS

html * {
  margin: 0;
  padding: 0;
}
ul#header {
  list-style: none;
  margin: 10px 10px 0;
}
ul#header li {
  display: inline-block;
  background: #000;
  color: #fff;
  padding: 4px 10px;
  margin-right: 10px;
}
ul#header li:hover {
  cursor: pointer;
  color: #f00;
}
div#content div {
  display: none;
  width: 520px;
  height: 350px;
  overflow: auto;
  background: #ccc;
  padding: 10px;
  border: 1px solid #000;
  margin-left: 10px;
}
div#content div img {
  width: 500px;
  height: 200px;
  margin-bottom: 10px;
}

JavaScript

// create a lazy instance
var lazy = $("img").lazy({
    chainable: false,
    visibleOnly: true,
    appendScroll: $("#content div"),
    // below config is just for demo purpose
    threshold: 0,
    afterLoad: function(e) {
        var image = e.attr("src").match(/tab\+(.*)\: image (\d)/g)[0];
        console.log(image.replace("+", " ").replace("%20", " "));
    }
});

// your tab controller
$("#header li").click(function() {
    $("#content div").hide().eq($(this).index()).show();
    // update lazy instance after tab change manually
    lazy.update();
});