JSFiddle - React, Tailwind, and code Playground

by shamaleyte

HTML

<div class="background-img lazyload" data-bgset="http://placehold.it/300x150 [--s] |
        http://placehold.it/500x250 [--m] |
        http://placehold.it/1000x500 [--l] |
        http://placehold.it/1400x700"></div>
<script src="https://cdn.rawgit.com/aFarkas/lazysizes/master/plugins/respimg/ls.respimg.js"></script>
<script src="https://rawgit.com/aFarkas/lazysizes/master/plugins/bgset/ls.bgset.js"></script>
<script src="https://cdn.rawgit.com/aFarkas/lazysizes/master/lazysizes.js"></script>
<!-- optional for gecko resizing -->
<script src="https://cdn.rawgit.com/aFarkas/lazysizes/master/plugins/static-gecko-picture/ls.static-gecko-picture.js"></script>

CSS

.background-img {
    height: auto;
    min-height: 200px;
    width: 100%;
    background-size: cover;
    background-position: 50% 50%;
}
.lazyloaded {
    border: 3px solid #0000cc;
}
.lazyloadind {
    border: 3px solid #cc0000;
}

JavaScript

window.lazySizesConfig = window.lazySizesConfig || {};
window.lazySizesConfig.customMedia = {
    '--s': '(max-width: 479px)',
        '--m': '(max-width: 991px)',
        '--l': '(max-width: 1536px)'
};