JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/blazy/1.6.2/blazy.min.js"></script>

    <body>
    <script>
        // Example
        var bLazy = new Blazy({
            src: 'blazy-data' // Default is data-src
        });
    </script>

    <div class="imgbg"><img class="b-lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw" blazy-data="http://lorempixel.com/400/400/abstract" border="1" width="400" height="400" /></div>
    <div class="imgbg"><img class="b-lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw" blazy-data="http://lorempixel.com/400/400/fashion" border="1" width="400" height="400" /></div>
    <div class="imgbg"><img class="b-lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw" blazy-data="http://lorempixel.com/400/400/city" border="1" width="400" height="400" /></div>
    <div class="imgbg"><img class="b-lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw" blazy-data="http://lorempixel.com/400/400/sports" border="1" width="400" height="400" /></div>
    <div class="imgbg"><img class="b-lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw" blazy-data="http://lorempixel.com/400/400/people" border="1" width="400" height="400" /></div>
    
    </body>
    </html>

CSS

.b-lazy {
            -webkit-transition: opacity 500ms ease-in-out;
            -moz-transition: opacity 500ms ease-in-out;
            -o-transition: opacity 500ms ease-in-out;
            transition: opacity 500ms ease-in-out;
            max-width: 100%;
            opacity: 0;
        }
        .b-lazy.b-loaded {
            opacity: 1;
        }
        .imgbg {
            background-color:#b0b0b0;
            max-width: 400px;
            padding: 2px;
            border-color: #fff;
            border-style: solid;
        }