JSFiddle - React, Tailwind, and code Playground

by triowinner

HTML

<body>
<div class="center">
<div class="content">
<a class="repHistory" href="javascript://" rel="nofollow" onclick="new _uWnd('Rh',' ',400,250,{autosize:1,closeonesc:1,maxh:300,minh:100},{url:'/index/9-$UID$'});return false;" tit="Смотреть историю репутации">Репутация</a>


<div id="data" style="left: 60px; top: 100px; position: relative;">
  <div class="x-sh xsl" style="position: absolute; z-index: 1; width: 6px; left: -4px; top: 0px; height: 278px;">
    <div class="xstl">
      <div class="xsml"></div>
    </div>
  </div>
  <div class="x-sh xsr" style="position: absolute; z-index: 1; width: 6px; top: 0px; height: 278px; left: 598px;">
    <div class="xstr">
      <div class="xsmr"></div>
    </div>
  </div>
  <div class="x-sh xsb" style="position: absolute; z-index: 1; height: 6px; left: -4px; width: 608px; top: 278px;">
    <div class="xsbl">
      <div class="xsbr">
        <div class="xsbc"></div>
      </div>
    </div>
  </div>
  <div id="_uwndWnd3" style="position: absolute; width: 600px; z-index: 2; left: 0px; overflow: visible;" class="xw-plain x-unselectable xw-resize xw-active" unselectable="on">
    <div class="xw-disabled" style="overflow: hidden; position: absolute; z-index: 30010; width: 600px; height: 280px; display: none;" unselectable="on"></div>
    <div class="xw-tl" unselectable="on">
      <div class="xw-tr" unselectable="on">
        <div class="xw-tc" unselectable="on">
          <div class="xw-sps" unselectable="on"></div>
          <div class="xw-hdr xw-draggable" unselectable="on">
            <div class="xt xt-close xt-close2" unselectable="on"></div>
            <div class="xt xt-maxi" unselectable="on" style="display: none;"></div>
            <div class="xt xt-rest" unselectable="on" style="display: none;"></div>
            <div class="xt xt-mini" unselectable="on" style="display: none;"></div><span class="xw-hdr-text" unselectable="on" title="">История репутации</span></div>
        </div>
      </div>
    </div>
    <div...

CSS

html {width: 100%; height: 100%;}
body {background: #27252c; color: #fff; font-size: 13px; font-family: 'Open Sans', sans-serif; line-height: 16px;}
html, body, address, blockquote, div, p, pre, h1, h2, h3, h4, h5, h6, hr, ul, ol, li, a, br, code, em, i, span, img, table, tbody, td, tr, input, textarea, select, button, form, fieldset, legend, label {margin: 0px; padding: 0px;}
form {padding:0px; margin:0px;}

a {outline: none; text-decoration: none; color: #50D8C0;}
a.repHistory:hover {outline: none; text-decoration: none; background: #aa1717;}
a.repHistory {float: left; padding: 12px 15px; font-size: 16px; background: #6f7381; color: #fff; border: none; cursor: pointer; margin: 20px 20px 20px 0;}

/* Содержимое */
.center {margin: 50px auto 0; width: 700px;}
.center .content {float: left; padding: 20px; width: 700px; background: #454750;}
.plus {background: #cc423d;}
.not {}

/* Модальное окно */
#fancybox-overlay {opacity: 0.6 !important; cursor: default !important;}
.myBtnLeftA, .myBtnRightA {display:none;}
.myBtnLeft, .myBtnRight {display:none;}
.x-sh, .xw-bl {display:none !important;} 
.xw-ml, .xw-mr {margin:0 !important;padding:0 !important;background:none !important;} 
.xw-mc {color: #efefef; font-weight: normal; float: none; margin: 0; padding: 20px !important; background: #364d63 !important; border: none !important; border-radius: 10px; box-shadow: 0px 1px 10px -1px #000;} 
.xw-hdr-text {display: none !important;} 
.xw-hdr img {display:none;} 
.xw-tl, .xw-tr, .xw-tc, .xw-hdr, .xw-sps .xw-draggable {height: 0 !important;background: none !important;padding: 0 !important;} 
.xw-tc {overflow: visible !important;} 
.xt-close {position: absolute !important;right: -14px;top: -14px;margin: 0 !important; z-index: 99999 !important; width: 35px !important; height: 35px !important; background: url('/images/close.png') no-repeat 0px 0px !important;} 
.xt-close:hover {opacity: 0.6;}
.xw-body {border: 0 !important;padding: 0 !important;} 
.xw-body table {margin:0px...

JavaScript

$(function() {
  $('#data').hide(0);
  $('a.repHistory').on('click', function() {
    $('#data').show(0);
   $('div[title^="Уровень повышен"]').parent('td').parent('tr').parent('tbody').parent('table').css('background','#cc423d'); 
   $('div[title^="Уровень понижен"]').parent('td').parent('tr').parent('tbody').parent('table').css('background','#2d8948'); 
   $('div[title^="Уровень репутации не изменен"]').parent('td').parent('tr').parent('tbody').parent('table').css('background','#7b7b7b');
  });
});