JSFiddle - React, Tailwind, and code Playground

by lustre

HTML

<div id="wrapper">
    <div class="darkblock"></div>
    <div class="lightblock"></div>
    <div class="darkblock2"></div>
    <div class="darkblock3"></div>
</div>

block
light / dark
white / blue / green / black

CSS

body {
    margin:0;
    padding:0;
    height:100%;
}

#wrapper .darkblock{
    width:100%;
    height:100vh;
    
    background-color:#333;
    background-image: url('http://www.divine-designs.net/code/scrolling-image-change/images/light-logo.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment:fixed;
}

#wrapper .lightblock{
    width:100%;
    height:100vh;
    
    background-color:#ccc;
    background-image: url('http://www.divine-designs.net/code/scrolling-image-change/images/dark-logo.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment:fixed;
}

#wrapper .darkblock2{
    width:100%;
    height:100vh;
    
    background-color:#333;
    background-image: url('http://www.divine-designs.net/code/scrolling-image-change/images/blue-logo.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment:fixed;
}

#wrapper .darkblock3{
    width:100%;
    height:100vh;
    
    background-color:#333;
    background-image: url('http://www.divine-designs.net/code/scrolling-image-change/images/green-logo.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment:fixed;
}