JSFiddle - React, Tailwind, and code Playground

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

HTML

<div style="display: none;"></div>
<!--CUT-->
<div class="Ar">
    <!---=====processpr text=====--->
    <div class="mobile">
        
<h3 class="zag1"></h3>
        <br />
         <h4 class="zag2"></h4>

        <p class="opis"></p>
    </div>
    <!---=====processpr=====--->
    <div class="big">
        <table>
            <tbody>
                <tr id="cvet">
                    <td id="kart">
                        <img src="http://s017.radikal.ru/i408/1409/c1/113b21314c25.jpg" />
                    </td>
                    <td id="zag-okno">
                        <h3 class="zag1"></h3>
                        <br />
                         <h4 class="zag2"></h4>

                    </td>
                </tr>
                <tr>
                    <td class="opis" colspan="2"></td>
                </tr>
            </tbody>
        </table>
    </div>
    <hr class="mobile" />
    <!---=====oper pamiat text=====--->
    <div class="mobile">
        
<h3 class="zag1"></h3>

        <p class="opis"></p>
    </div>
    <!---=====oper pamiat=====--->
    <div class="big element-animation">
        <table>
            <tbody>
                <tr id="cvet">
                    <td id="kart">
                        <img src="http://s010.radikal.ru/i314/1409/36/76edc6431315.jpg" />
                    </td>
                    <td id="zag-okno">
                        <h3 class="zag1"></h3>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" class="opis"></td>
                </tr>
            </tbody>
        </table>
    </div>
    <hr class="mobile" />
    <!---=====Wi-Fi text=====--->
    <div class="mobile">
        <p><h3 class="zag1"></h3><br /><h4 class="zag2"></h4>
        </p>
        <p class="opis">
        </p>
    </div>
    <!---=====Wi-Fi=====--->
    <div class="big">
        <table>
            <tbody>
                <tr id="cvet">
                    <td id="kart">
               ...

CSS

/*===========Table v dive=========*/
 div.big table {
    width: 600px;
    height: 200px;
    position: static;
    border-collapse: collapse;
    margin: 0px;
    padding: 0px;
    border: none;
    float: none;
    table-layout: auto;
    font-size: 10px;
    font-family: tahoma, geneva, verdana, sans-serif;
    outline-style: none !important;
}
/*==========body tablichki=========*/
 div.big tbody {
    outline-style: none !important;
    position: static;
    margin: 0px;
    padding: 0px;
    border: none;
    background-color: transparent;
    float: none;
}
/*=========TR v tablichke=========*/
 div.big tr {
    outline-style: none !important;
    position: static;
    margin: 0px;
    padding: 0px;
    border: none;
    z-index: auto;
    float: none;
    font-weight: normal;
    background-color: transparent;
}
div.Ug div.big tr#cvet {
    background-color: #f5f5f5;
}
div.Ba div.big tr#cvet {
    background-color: #f0f5f5;
}
div.Ar div.big tr#cvet {
    background-color: #f5f0f5;
}
div.Ku div.big tr#cvet {
    background-color: #f5f5f5;
}
div.K div.big tr#cvet {
    background-color: #f5f5f5;
}
div.In div.big tr#cvet {
    background-color: #f5f5f5;
}
div.Xe div.big tr#cvet {
    background-color: #f5f5f5;
}
/*=========OKNO DLYA KARTIN========*/
 div.big td#kart {
    outline-style: none !important;
    width: 126px;
    height: 104px;
    padding: 0px !important;
    position: static;
    margin: 0px;
    border: 1px solid #bac4c8;
    z-index: auto;
    background-color: transparent;
    float: none;
    vertical-align: middle;
    text-align: center;
}
/*==============OKNO ZAGOLOVKA TAB===========*/
 div.big td#zag-okno {
    outline-style: none !important;
    width: 473px;
    padding: 12px 5px 12px 7px !important;
    position: static;
    margin: 0px;
    border: 1px solid #bac4c8;
    z-index: auto;
    background-color: transparent;
    float: none;
    vertical-align: middle;
}
/*-----============KARTINA===========-------*/
 div.big img {
   ...