JSFiddle - React, Tailwind, and code Playground

by Shota Nara

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>
<div class="wrapper">
<div class="box lazyload" data-original="http://placehold.it/1000x750/000000/ffffff/&text=Original Image"></div>
<div class="box lazyload" data-original="http://placehold.it/1000x750/ffffff/000000/&text=Original Image"></div>
<div class="box lazyload" data-original="http://placehold.it/1000x750/000000/ffffff/&text=Original Image"></div>
<div class="box lazyload" data-original="http://placehold.it/1000x750/ffffff/000000/&text=Original Image"></div>
<div class="box lazyload" data-original="http://placehold.it/1000x750/000000/ffffff/&text=Original Image"></div>
<div class="box lazyload" data-original="http://placehold.it/1000x750/ffffff/000000/&text=Original Image"></div>
<div class="box lazyload" data-original="http://placehold.it/1000x750/000000/ffffff/&text=Original Image"></div>
<div class="box lazyload" data-original="http://placehold.it/1000x750/ffffff/000000/&text=Original Image"></div>
<div class="box lazyload" data-original="http://placehold.it/1000x750/000000/ffffff/&text=Original Image"></div>
<div class="box lazyload" data-original="http://placehold.it/1000x750/ffffff/000000/&text=Original Image"></div>
<div class="box lazyload" data-original="http://placehold.it/1000x750/000000/ffffff/&text=Original Image"></div>
<div class="box lazyload" data-original="http://placehold.it/1000x750/ffffff/000000/&text=Original Image"></div>
<div class="box lazyload" data-original="http://placehold.it/1000x750/000000/ffffff/&text=Original Image"></div>
<div class="box lazyload" data-original="http://placehold.it/1000x750/ffffff/000000/&text=Original Image"></div>
<div class="box lazyload" data-original="http://placehold.it/1000x750/000000/ffffff/&text=Original Image"></div>
<div class="box lazyload" data-original="http://placehold.it/1000x750/ffffff/000000/&text=Original Image"></div>
<div class="box lazyload"...

CSS

.wrapper{
    padding: 20px;   
}
.box{
background-image: url("http://placehold.it/1000x750/f1f1f1/dddddd/&text=BG Image");
background-size: 100% 100%;
position: relative;
margin: 0 0 30px;
}
.box:after{
padding-top:75%;
display:block;
content: '';
}

JavaScript

$("div.lazyload").lazyload({
      effect : "fadeIn"
  });