JSFiddle - React, Tailwind, and code Playground

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

HTML

<div class="switch">
    <input type="checkbox">
    <label><i></i>
    </label>
    <div class="qwe"></div>
    <table id="table1">
        <tbody>
            <tr id="cvet">
                <td id="kart" style="background-image:url(http://s50.radikal.ru/i130/1502/11/87f6d34d7a1c.png);background-position: center;background-repeat: no-repeat;" rowspan="2"></td>
                <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 id="table2">
        <tbody>
            <tr id="cvet">
                <td id="kart" style="background-image:url(http://s018.radikal.ru/i508/1502/cb/36787d82bd30.png);background-position: center;background-repeat: no-repeat;" rowspan="2"></td>
                <td id="zag-okno">
                     <h3 class="zag1"> Оперативная память</h3>

                </td>
            </tr>
            <tr>
                <td class="opis">От 8 до 16 ГБ памяти 1600 МГц</td>
            </tr>
        </tbody>
    </table>
    <table id="table3">
        <tbody>
            <tr id="cvet">
                <td id="kart" style="background-image:url(http://s018.radikal.ru/i526/1502/f8/d46df3e4e48a.png);background-position: center;background-repeat: no-repeat;" rowspan="2"></td>
                <td id="zag-okno">
                     <h3 class="zag1">Память</h3>

                </td>
            </tr>
            <tr>
                <td class="opis">От 128 ГБ до 4 ТБ суммарной памяти</td>
            </tr>
        </tbody>
    </table>
    <table id="table4">
        <tbody>
            <tr id="cvet">
                <td id="kart" style="background-image:url(http://s020.radikal.ru/i704/1502/c7/8f522a66f84c.png);background-position: center;background-repeat: no-repeat;" rowspan="2"></td>
                <td id="zag-okno">
                    ...

CSS

*, *:after, *:before {
    box-sizing: border-box;
}

.switch input {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 100;
    opacity: 0;
    cursor: pointer;
}
.switch {
    left:800px;
    width: 75px;
    height: 25px;
    margin: 50px ;
    position: absolute;
}
.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;

}
.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;
    height:420px;
    border: 1px solid silver;
    position:absolute;  
    right: 0px;
}
table {
    border-collapse: collapse;
    font-family: tahoma, arial, helvetica,...