JSFiddle - React, Tailwind, and code Playground

by cahnory

HTML

<input type="checkbox" id="screen-1" class="screen-visibility" />
<div class="screen">
    screen 1
    <div>
        <label for="screen-2">next</label>
        <input type="checkbox" id="screen-2" class="screen-visibility" />
        <div class="screen">
            <label for="screen-2">back</label>
            scren 2
        </div>
    </div>
</div>

CSS

.screen {
    background: #EEE;
    opacity: .9;
    transition: all .2s;

    bottom: 0;
    left:   100%;
    position: absolute;
    right: -100%;
    top: 0;
}
.screen-visibility:checked ~ .screen {
    left: 0;
    right: 0;
}