JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<div class="section">
  <ul class="tabs">
    <li class="current"><a href="#" class="urov_1"><span><img src="http://lorempixel.com/g/28/16"/></span></a></li>
    <li><a href="#" class="urov_2"><span><img src="http://lorempixel.com/g/28/16"/></span></a></li>
    <li><a href="#" class="urov_3"><span><img src="http://lorempixel.com/g/28/16"/></span></a></li>
    <li><a href="#" class="urov_4"><span><img src="http://lorempixel.com/g/28/16"/></span></a></li>
    <li><a href="#" class="urov_5"><span><img src="http://lorempixel.com/g/28/16"/></span></a></li>
    <li><a href="#" class="urov_6"><span><img src="http://lorempixel.com/g/28/16"/></span></a></li>
    <li><a href="#" class="urov_7"><span><img src="http://lorempixel.com/g/28/16"/></span></a></li>
  </ul>

  <div class="box_usl visible">
    <table width="100%">
      <tr>
        <td width="166">
          <img src="/image/urov_1_pr.png" width="161" height="127" alt="" />
        </td>
        <td>
          <p><strong>Touch-менеджер.</strong></p>

          <p>У администраторов Вы можете получить планшеты IРad, узнать свежие новости в мире и в городе
          (в нашем Ipad всегда для вас свежая деловая пресса), а также новости и акции нашей компании,
          пройти видеоэкскурсию по автоцентру и познакомиться со всеми его возможностями, посмотреть фильм,
          поиграть, пообщаться с друзьями в сетях.</p>
        </td>
      </tr>
    </table>
  </div>
  <div class="box_usl">
    <table width="100%">
      <tr>
        <td width="166">
          <img src="/image/urov_2_pr.png" width="161" height="127" alt="" />
        </td>
        <td>
          <p><strong>Авто-няня.</strong></p>

          <p>Для Ваших детей мы приготовили сюрприз!<br>
            Это детский уголок с увлекательным лабиринтом и знаменитой во всём мире игровой приставкой X-box kinect – всей семьёй здесь Вы можете окунуться в виртуальный мир видеоигр!</p>
...

CSS

.no-display {display: none;}
.box_usl {
  display: none; /* по умолчанию прячем все блоки */
  border: 1px solid #60605e;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  padding: 10px;
  position: relative;
}
.box_usl.visible {
  display: block; /* по умолчанию показываем нужный блок */
}
.box_usl td {
  vertical-align: top;
}
.tabs {
  display: inline-block;
  list-style: none !important;
  clear: both;
  padding: 0;
  margin: 0 0 10px !important;
}
.tabs li {
  float: left;
  position: relative;
}
.tabs li a {
  width: 82px;
  height: 82px;
  display: block;
  text-align: center;
  text-decoration: none;
  position: relative;

  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.tabs li a span {
  display: none;
  position: absolute;
  width: 28px;
  height: 16px;
  bottom: -17px;
  left: 25px;
  z-index: 10;
}
.tabs li.current a span {
  display: block;
}
.urov_1 {background: url(http://lorempixel.com/g/60/60) no-repeat center center;}
.urov_1:hover {background: url(http://lorempixel.com/g/82/82) no-repeat center center;}

.urov_2 {background: url(http://lorempixel.com/g/60/60) no-repeat center center;}
.urov_2:hover {background: url(http://lorempixel.com/g/82/82) no-repeat center center;}

.urov_3 {background: url(http://lorempixel.com/g/60/60) no-repeat center center;}
.urov_3:hover {background: url(http://lorempixel.com/g/82/82) no-repeat center center;}

.urov_4 {background: url(http://lorempixel.com/g/60/60) no-repeat center center;}
.urov_4:hover {background: url(http://lorempixel.com/g/82/82) no-repeat center center;}

.urov_5 {background: url(http://lorempixel.com/g/60/60) no-repeat center center;}
.urov_5:hover {background: url(http://lorempixel.com/g/82/82) no-repeat center center;}

.urov_6 {background: url(http://lorempixel.com/g/60/60) no-repeat center center;}
.urov_6:hover {background:...

JavaScript

$(function() {
    $('ul.tabs').each(function() {
        var ul = $(this);
        var lis = ul.find('> li');
        
        lis.each(function() {
            var li = $(this);
            
            li.bind('mouseenter', function() {
                if (!li.hasClass('current')) {
                    li.addClass('current').siblings().removeClass('current')
                      .parents('div.section').find('div.box_usl').eq(lis.index(li))
                      .fadeIn(300).siblings('div.box_usl').hide();
                }
            })
        });
    });
});