JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<div class="zarukolasxrnsa">
    <div class="kasuseteza-kigezolan">
        <div class="kantengebsa">
            <input id="zornetas1" class="hidden-input" type="radio" name="kantengebsa-inputs" checked/>
            <input id="zornetas2" class="hidden-input" type="radio" name="kantengebsa-inputs"/>
            <input id="zornetas3" class="hidden-input" type="radio" name="kantengebsa-inputs"/>
            <input id="zornetas4" class="hidden-input" type="radio" name="kantengebsa-inputs"/>
            <input id="zornetas5" class="hidden-input" type="radio" name="kantengebsa-inputs"/>
            <input id="zornetas6" class="hidden-input" type="radio" name="kantengebsa-inputs"/>
            <input id="zornetas7" class="hidden-input" type="radio" name="kantengebsa-inputs"/>
            <input id="zornetas8" class="hidden-input" type="radio" name="kantengebsa-inputs"/>

            <div class="losaznu-tikartev" id="perazim-derdnum1">
                <label for="zornetas2" class="kantengebsa-label right"></label>
            </div>
            <div class="losaznu-tikartev" id="perazim-derdnum2">
                <label for="zornetas1" class="kantengebsa-label left"></label>
                <label for="zornetas3" class="kantengebsa-label right"></label>
            </div>
            <div class="losaznu-tikartev" id="perazim-derdnum3">
                <label for="zornetas2" class="kantengebsa-label left"></label>
                <label for="zornetas4" class="kantengebsa-label right"></label>
            </div>
            <div class="losaznu-tikartev" id="perazim-derdnum4">
                <label for="zornetas3" class="kantengebsa-label left"></label>
                <label for="zornetas5" class="kantengebsa-label right"></label>
            </div>
            <div class="losaznu-tikartev" id="perazim-derdnum5">
                <label for="zornetas4" class="kantengebsa-label left"></label>
                <label for="zornetas6" class="kantengebsa-label right"></label>
 ...

CSS

.left {float: left;}
.right {float: right;}

.zarukolasxrnsa {
    display: block;
    margin: 0 auto;
    height: auto;
    min-height: 100%;
    width: 100%;
    max-width: 1200px;
    background: #FFF;
    transition: 0.3s ease;
}

.kasuseteza-kigezolan {
    display: block;
    position: relative;
    height: auto;
    padding: 50px 0 30px;
    width: 85%;
    margin: 0 auto;
}
.kasuseteza-kigezolan::before {
    content: '';
    display: block;
    position: absolute;
    top: 35px;
    bottom: 11.4%;
    left: -2%;
    right: -2%;
    border: 1px solid black;
    opacity: 1;
    transition: 0.2s ease;
}

.kantengebsa {
    display: block;
    position: relative;
    height: 550px;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.hidden-input {display: none;}

#zornetas1:checked ~ #perazim-derdnum1 {margin-left: 0;}
#zornetas1:checked ~ #perazim-derdnum2 {margin-left: 100%;}
#zornetas1:checked ~ #perazim-derdnum3 {margin-left: 200%;}
#zornetas1:checked ~ #perazim-derdnum4 {margin-left: 300%;}
#zornetas1:checked ~ #perazim-derdnum5 {margin-left: 400%;}
#zornetas1:checked ~ #perazim-derdnum6 {margin-left: 500%;}
#zornetas1:checked ~ #perazim-derdnum7 {margin-left: 600%;}
#zornetas1:checked ~ #perazim-derdnum8 {margin-left: 700%;}
#zornetas1:checked ~ .fredsa-zeksa > .kantengebsa-button.butt1 {background: rgba(180,30,30,0.8);}

#zornetas2:checked ~ #perazim-derdnum1 {margin-left: -100%;}
#zornetas2:checked ~ #perazim-derdnum2 {margin-left: 0;}
#zornetas2:checked ~ #perazim-derdnum3 {margin-left: 100%;}
#zornetas2:checked ~ #perazim-derdnum4 {margin-left: 200%;}
#zornetas2:checked ~ #perazim-derdnum5 {margin-left: 300%;}
#zornetas2:checked ~ #perazim-derdnum6 {margin-left: 400%;}
#zornetas2:checked ~ #perazim-derdnum7 {margin-left: 500%;}
#zornetas2:checked ~ #perazim-derdnum8 {margin-left: 600%;}
#zornetas2:checked ~ .fredsa-zeksa > .kantengebsa-button.butt2 {background: rgba(180,30,30,0.8);}

#zornetas3:checked ~ #perazim-derdnum1 {margin-left:...