JSFiddle - React, Tailwind, and code Playground

HTML

<div id="element1">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 640 640" width="640" height="640"><defs><path d="M134.88 219.08C134.88 226.95 128.69 233.34 121.05 233.34C113.42 233.34 107.22 226.95 107.22 219.08C107.22 211.21 113.42 204.83 121.05 204.83C128.69 204.83 134.88 211.21 134.88 219.08Z" id="aTxDMxLmW"></path><text id="b1kZmrlhnr" x="105.11" y="81.7" font-size="12" font-family="Open Sans" font-weight="normal" font-style="normal" letter-spacing="0" alignment-baseline="before-edge" transform="matrix(1 0 0 1 -94.37302891662594 -63.14958764565661)" style="line-height:100%" xml:space="preserve" dominant-baseline="text-before-edge"><tspan x="105.11" dy="0em" alignment-baseline="before-edge" dominant-baseline="text-before-edge" text-anchor="start">Flexfit Gehäusesystem</tspan><tspan x="105.11" dy="1.2em" alignment-baseline="before-edge" dominant-baseline="text-before-edge" text-anchor="start">einfache Montage von</tspan><tspan x="105.11" dy="1.2em" alignment-baseline="before-edge" dominant-baseline="text-before-edge" text-anchor="start">Zubehörkomponenten</tspan></text><style id="opensansnormalnormal">
    @font-face {
    font-family: "Open Sans";
    font-weight: normal;
    }
    </style><path d="M118.92 204.83L76.48 74.58" id="a2F7nNFlyT"></path></defs><g><g><g><use xlink:href="#aTxDMxLmW" opacity="0.65" fill="#fcf8f8" fill-opacity="1"></use><g><use xlink:href="#aTxDMxLmW" opacity="0.65" fill-opacity="0" stroke="#f7fcf9" stroke-width="3" stroke-opacity="1"></use></g></g><g id="a1uLWyiGY5"><use xlink:href="#b1kZmrlhnr" opacity="1" fill="#fcf8f8" fill-opacity="1"></use></g><g><use xlink:href="#a2F7nNFlyT" opacity="1" fill="#fcf8f8" fill-opacity="1"></use><g><use xlink:href="#a2F7nNFlyT" opacity="0.73" fill-opacity="0" stroke="#f9fafc" stroke-width="2" stroke-opacity="1"></use></g></g></g></g></svg>

</div>
<div id="element2">
  <svg version="1.1"...

CSS

#element1, #element2, #element3, #element4 {
    width: 100px;
    height: 100px;
    background: orange;
    margin:100px auto;
}
#element4 {
    margin-bottom:600px;
}

JavaScript

$(window).scroll(function () {
    $('[id^="element"]').each(function () {
        if (($(this).offset().top - $(window).scrollTop()) < 20) {
            $(this).stop().fadeTo(100, 0);
        } else {
            $(this).stop().fadeTo('fast', 1);
        }
    });
});