JSFiddle - React, Tailwind, and code Playground

by maros_urbanec

HTML

<div class="slideshow">

<input type="radio" id="slide1" name="slide" checked />
<label for="slide2" class="forward"></label>
<div class="content">Page 1</div>

<input type="radio" id="slide2" name="slide" />
<label for="slide3" class="forward"></label>
<label for="slide1" class="back"></label>
<div class="content">Page 2</div>

<input type="radio" id="slide3" name="slide" />
<label for="slide2" class="back"></label>
<div class="content last">Page 3</div>
    </div>

SCSS

.slideshow {
    background-color: gray; 
}

.content {
    position: fixed;
    top: 0; left: 0; bottom:0; right: 0;
background: -webkit-linear-gradient(left, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
    transition: margin-left 0.2s linear;
    font-size: 2em;
    color: white;
    text-align: center;
}

input:checked + label + .content {
    margin-left: 0;
}

input:checked + label + label + .content {
    margin-left: 0;
}

input:not(:checked) ~ .content {
    margin-left: -100%;
}

input:checked + label + .content ~ .content {
    margin-left: 100%;
}

input:checked + label + label + .content ~ .content {
    margin-left: 100%;
}

input:not(:checked) ~ label {
    display: none;
}

input:checked + label {
    display: block;
}

input:checked + label + label {
    display: block;
}


label[for] {
    display: block;
    width: 2em;
    height: 2em;
    position: absolute;
    top: 50%;
    background-color: lime;
    cursor: pointer;
    z-index: 1;
    
    &.forward {
        right: 0;
    }
    &.back {
      left: 0
    }
}