JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/zurb/twentytwenty/master/js/jquery.twentytwenty.js"></script>
<script src="https://rawgit.com/aFarkas/lazysizes/gh-pages/lazysizes.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/zurb/twentytwenty/master/css/twentytwenty.css">
<script src="https://rawgit.com/zurb/twentytwenty/master/js/jquery.event.move.js"></script>
<div class="wrapper">
<div class="container">
 <!-- The before image is first -->
 <img data-src="//placehold.it/400x200&text=1" alt="" class="lazyload" />
 <!-- data-The after image is last -->
 <img src="//placehold.it/400x200&text=2" alt="" class="lazyload" />
</div>
</div>
<br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="wrapper">
<div class="container">
 <!-- The before image is first -->
 <img data-src="//placehold.it/400x200&text=1" alt="" class="lazyload" />
 <!-- data-The after image is last -->
 <img src="//placehold.it/400x200&text=2" alt="" class="lazyload" />
</div>
</div>

SCSS

*, *:before, *:after {box-sizing:border-box;}
img {max-width:100%; height:auto;}
.wrapper {width:400px; border:2px solid tomato;}

JavaScript

$('.container').each(function(){
  var $module = $(this);
  var update = function(){
    $(window).trigger("resize.twentytwenty");
  };

  // Note: Instead of waiting for all images until we initialize the widget
  // we use event capturing to update the widget's layout progressively.
  this.addEventListener('load', update, true);

  $module.twentytwenty();
});