JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slider" style="width: 200%">
    <div class="slide" style="background: #880000;">
        Content A
    </div>
    <div class="slide" style="left: 100%; background: #0000BB;">
        Content B
    </div>
</div>
<div style="width: 100%; height: 100vh; background: #004400">
    Content C
</div>

CSS

.slider{
    height: 100vh;
}

.slide{
    height: 100vh;
    width: 100%;
    position: absolute;
}

body{
    /*overflow-x: hidden;*/
}