JSFiddle - React, Tailwind, and code Playground

by Ариан Шапиро

HTML

<div class="switch">
    <input type="checkbox">
    <label><i></i>
    </label>
    </div>
<div class="qwe">
    <table>
        <tbody>
            <tr id="cvet">
                <td id="zag-okno">
                     <h3 class="zag1"> Процессор</h3>

                </td>
            </tr>
            <tr>
                <td class="opis">Intel Core i3 от 3.5 ГГц до 3.7 ГГц</td>
            </tr>
        </tbody>
    </table>
    
    <table style="top:250px;">
        <tbody>
            <tr id="cvet">
                <td id="zag-okno">
                     <h3 class="zag1"> Оперативная память</h3>

                </td>
            </tr>
            <tr>
                <td class="opis">От 8 до 16 ГБ памяти 1600 МГц</td>
            </tr>
        </tbody>
    </table>
    <table style="top:380px;">
        <tbody>
            <tr id="cvet">
                <td id="zag-okno">
                     <h3 class="zag1">Память</h3>

                </td>
            </tr>
            <tr>
                <td class="opis">От 128 ГБ до 4 ТБ суммарной памяти</td>
            </tr>
        </tbody>
    </table>
    <table style="right:-110px;">
        <tbody>
            <tr id="cvet">
                <td id="zag-okno">
                     <h3 class="zag1"> Процессор</h3>

                </td>
            </tr>
            <tr>
                <td class="opis">gfd fdg sdfgsdf gdsfg sdf dsg</td>
            </tr>
        </tbody>
    </table>
    <table style="top:250px;right:-110px;">
        <tbody>
            <tr id="cvet">
                <td id="zag-okno">
                     <h3 class="zag1"> Процессор</h3>

                </td>
            </tr>
            <tr>
                <td class="opis">gfd fdg sdfgsdf gdsfg sdf dsg</td>
            </tr>
        </tbody>
    </table>
    <table style="top:380px;right:-110px;">
        <tbody>
            <tr id="cvet">
                <td id="zag-okno">
                     <h3 class="zag1"> Процессор</h3>

       ...

CSS

*, *:after, *:before {
    box-sizing: border-box;
}
.switch input {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 100;
    opacity: 0;
    cursor: pointer;
}
.switch {
    width: 75px;
    height: 25px;
    margin: 50px auto;
    position: relative;
}
.switch label {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    background: #a5a39d;
    border-radius: 40px;
    box-shadow: inset 0 2px 4px 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.5);
}
.switch label:after {
    content:"";
    position: absolute;
    z-index: -1;
    top: -8px;
    right: -8px;
    bottom: -8px;
    left: -8px;
    border-radius: inherit;
    background: #ccc;
    background: -webkit-linear-gradient(#f2f2f2, #ababab);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.25);
}
.switch label:before {
    content:"";
    position: absolute;
    z-index: -1;
    top: -12px;
    right: -12px;
    bottom: -12px;
    left: -12px;
    border-radius: inherit;
    background: #eee;
    background: -webkit-linear-gradient(#e5e7e6, #eee);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    -webkit-filter: blur(1px);
    filter: blur(1px);
}
.switch label i {
    display: block;
    height: 100%;
    width: 60%;
    position: absolute;
    right: 40%;
    top: 0;
    z-index: 2;
    border-radius: inherit;
    background: #b2ca9e;
    background: -webkit-linear-gradient(#f7f2f6, #b2ac9e);
    box-shadow: inset 0 1px 0 white, 0 0 4px rgba(0, 0, 0, 0.3), 0 5px 5px rgba(0, 0, 0, 0.2);
    -webkit-transition: all 0.3s ease-out;
}
.switch label i:after {
    content:"";
    position: absolute;
    left: 15%;
    top: 25%;
    width: 70%;
    height: 50%;
    background: #d2cbc3;
    background: -webkit-linear-gradient(#cbc7bc, #d2cbc3);
    border-radius: inherit;
}
.switch input:checked ~ label {
    background: #0099FF;
}
.switch input:checked ~ label i {
    left: auto;
    right: -1%;
}
.qwe {
    width:950px;
   ...