JSFiddle - React, Tailwind, and code Playground

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

HTML

<div style="display: none;">Как же достичь катарсиса и легкости ? Для этого есть легкая модель для легких задач. Что можно считать легкой задачей?  Браузер, фильмы, музыка, Офис, базы, легкие игры и ненавязчивая работа с редакторами.</div>
<!--CUT--> <div class="Ba"><!---=====processpr text=====--->
<div class="mobile">
<h3 class="zag1">Процессор. Сверхточное вычисление.</h3>
<p class="opis">Intel Core поколения 4+ - самое передовое,что можно предложить на сегоднешний день."Базовый" использует четырех ядерный процессор i5 с тактовой частотой 3.2 ГГц. Процессоры последнего поколения очень энергоэффективны и выделяют приве веноменальной мощности всего 84 Ватта тепловой энергии. Можно не бояться что Ваш компьютер превратится в комнатный обогреватель.</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></td>
</tr>
<tr>
<td class="opis" colspan="2">Intel Core поколения 4+ - самое передовое,что можно предложить на сегоднешний день."Базовый" использует четырех ядерный процессор i5 с тактовой частотой 3.2 ГГц. Процессоры последнего поколения очень энергоэффективны и выделяют приве веноменальной мощности всего 84 Ватта тепловой энергии. Можно не бояться что Ваш компьютер превратится в комнатный обогреватель.</td>
</tr>
</tbody>
</table>
</div>
<hr class="mobile" />
<!---=====oper pamiat text=====--->
<div class="mobile">
<p><h3 class="zag1">Колличесво работы и сложность - прерогатива оперативной памяти</h3></p>
<p class="opis">Именно оперативная память хранит в себе файлы которые должны быть на готове для обработки. Чем больше оперативной памяти тем больше можно открыть программ и использовать их вместе.</p>
</div>
<!---=====oper pamiat=====--->
<div class="big element-animation">
<table>
<tbody>
<tr id="cvet">
<td id="kart"><img...

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: #f5f5f5;
}
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: 2px 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: 2px solid #bac4c8;
    z-index: auto;
    background-color: transparent;
    float: none;
    vertical-align: middle;
}
/*-----============KARTINA===========-------*/
div.big img {
    width:...