JSFiddle - React, Tailwind, and code Playground

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

HTML

<div style="display: none;"></div>
<!--CUT-->
<div class="K">
    <!---=====processpr text=====--->
    <div class="mobile">
        
<h3 class="zag1">Сила четырех</h3>
        <br />
         <h4 class="zag2">Самых сильных четырех</h4>

        <p class="opis">Процессор - это главный калькулятор компьютера, и в этой модели он использует 4 ядра. На выбор предоставлены 2 серии, это Intel Core i5 и i7 и обе с разблокированным множетелем для разгона. Серия i7 в пиковой нагрузке может быть мощнее до 30% процессоров i5 с такой-же частотой.</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">Процессор - это главный калькулятор компьютера, и в этой модели он использует 4 ядра. На выбор предоставлены 2 серии, это Intel Core i5 и i7 и обе с разблокированным множетелем для разгона. Серия i7 в пиковой нагрузке может быть мощнее до 30% процессоров i5 с такой-же частотой.</td>
                </tr>
            </tbody>
        </table>
    </div>
    <hr class="mobile" />
    <!---=====oper pamiat text=====--->
    <div class="mobile">
        
        <h3 class="zag1">Быстрота в любых условиях</h3>
        <br/>
        <h4 class="zag2">Когда есть запас оперативной памяти</h4>
        <p class="opis">Оперативная память это высокоскоростная память которая работает напрямую с процессором. Чем больше оперативной памяти - тем больше можно открыть програм одновременно и использовать их вместе. В модели "К" используется двухканальная с...

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 {
   ...