JSFiddle - React, Tailwind, and code Playground

HTML

<!-- 1. Load the resrc.js library -->
  <script src="//use.resrc.it/0.9"></script>
  <!-- 2. Load the plugin -->
  <script src="https://rawgit.com/resrcit/resrc.breakpoint.js/master/src/resrc.breakpoint.js"></script>
  <!-- 3. On DOM Ready, configure resrc then execute the breakpoint plugin then run resrc also -->
  <script>
    resrc.ready(function () {
      resrc.configure({
        resrcOnResizeDown : true,
        resrcOnPinch : true,
        pixelRounding : 1
      }).breakpoint({
        breakpointClass : "artdirection",
        prefix : "breakpoint-src-"
      }).run();
    });
  </script>
<body>
    <img breakpoint-src-0px="http://app.resrc.it/c=ar5x10,yof0,xof46/c=ar1x1/o=80/http://www.resrc.it/img/demo/barack-obama.jpg" breakpoint-src-320px="http://app.resrc.it/c=ar10x4,yof50/c=ar4x3/o=80/http://www.resrc.it/img/demo/barack-obama.jpg" breakpoint-src-640px="http://app.resrc.it/c=ar10x5,yof50/c=ar4x3/o=80/http://www.resrc.it/img/demo/barack-obama.jpg" breakpoint-src-720px="http://app.resrc.it/c=ar4x3/o=85/http://www.resrc.it/img/demo/barack-obama.jpg" alt="" class="resrc artdirection" />
</body>

CSS

.artdirection {
    width: 100%
}