JSFiddle - React, Tailwind, and code Playground

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

HTML

<div class="qwe"></div>
    <table id="table1">
        <tbody>
            <tr id="cvet">
                <td id="kart" style="background-image:url(http://s017.radikal.ru/i437/1502/cf/299c74391b98.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 i5 с частотой 3.2 ГГц </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 до 32 ГБ памяти 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://s009.radikal.ru/i310/1502/e4/7cf797b8b8d5.png);background-position: center;background-repeat: no-repeat;" rowspan="2"></td>
                <td id="zag-okno">
                     <h3 class="zag1"> Видео&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        ...

CSS

body {
    overflow:hiden;
}
.qwe {
    width:900px;
    height:420px;
    border: 1px solid silver;
    position:absolute;  
    background:black;
   z-index:-150;
}

table {
    font-weight:100 !important;
    border-collapse: collapse;
    font-family: tahoma,helvetica, arial, sans-serif;
    margin:50px;
    width:350px;
    height:auto;z-index:150;
    position:absolute;
    color:#A0CF8E;
}
/*td {
    border: 1px solid #bac4c8;
}*/
#kart {
    width:73px;
    height:73px;
}
#sli {
    font-size:12px;
}
#slikart {
    width:15px;
    height:15px;
}
.zag1 {
    font-weight: normal;
    font-size: 20px;
    margin: 10px 10px 10px 20px;
}
.opis {
    font-size: 15px;
    padding: 0px 0px 0px 10px;
}
#table1 {
    left:50px;
}
#table2 {
    top:135px;
    left:50px;
}
#table3 {
    top:250px;
    left:50px;
}
#table4 {
    left:480px;
}
#table5 {
    top:135px;
    left:480px;
}
#table6 {
    top:250px;
    left:480px;
}