JSFiddle - React, Tailwind, and code Playground

HTML

<!-- ОТДЕЛЬНАЯ СТРАНИЦА КОТОРАЯ ДОЛЖНА ПОДГРУЖАТЬСЯ//
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Категории</title></head><body>

<div id="bollars">
    <td class="block-cat">
    <i class="fa fa-undo" style="color:#999;"></i>&nbsp;<a href="#" style="color:#999;" onclick="walkMain();" title="Вернуться к списку всех категорий">назад к категориям</a>
    <h2><a href="#">Сухие смеси</a></h2>
    <table>
        <tr>
            <td>
                <ul>
                    <li><i class="fa fa-angle-double-right"></i>&nbsp;<a href="#" id="sbollars">БОЛАРС</a></li>
                    <li><i class="fa fa-angle-double-right"></i>&nbsp;<a href="#" id="knauf">Knauf</a></li>
                    <li><i class="fa fa-angle-double-right"></i>&nbsp;<a href="#" id="volma">ВОЛМА</a></li>
                    <li><i class="fa fa-angle-double-right"></i>&nbsp;<a href="#" id="plitonit">Плитонит</a></li>
                    <li><i class="fa fa-angle-double-right"></i>&nbsp;<a href="#" id="kamennycvetok">Каменный цветок</a></li>
                </ul>
            </td>
            <td>
                <ul>
                    <li><i class="fa fa-angle-double-right"></i>&nbsp;<a href="#" id="refrekta">Perfekta</a></li>
                    <li><i class="fa fa-angle-double-right"></i>&nbsp;<a href="#" id="ceresit">Ceresit</a></li>
                    <li><i class="fa fa-angle-double-right"></i>&nbsp;<a href="#" id="axton">Axton</a></li>
                    <li><i class="fa fa-angle-double-right"></i>&nbsp;<a href="#" id="weber">Weber</a></li>
                </ul>
                <a href="index.html" class="all-products"><i class="fa fa-bars"></i>&nbsp;Весь товар</a>
            </td>
        </tr>
    </table>
</td>
</div>
<div id="knauf">кнауф</div>
<div id="volma">волма</div>
<div id="plitonit">пило</div>
<div id="kamennycvetok">каменный цветок</div>
<div id="refrekta">рефретка</div>
<div id="ceresit">цересит</div>
<div id="axton">Акстон</div>
<div...

CSS

/* header category */
        .h-cat-block {width:100%;margin:5px 0 0 0;}
        .h-cat-block td {padding:0 10px 10px 15px;}
        /* category */
            .h-cats-feat {width:100%;}
            #cat-block-close {font-size:13px;color:#ccc;cursor:pointer;background:#f1f1f1;}
            #cat-block-close:hover {background:#eeeeee;color:#818484;}
            #cat-block-close div {padding:5px 0 5px 47%;}
            .h-cat h2 a {margin-left:15px;color:#155a63;font-size:16px;text-transform:uppercase;}
            .h-cat h2 a:hover {color:#333;}
            .h-cat li {font-size:13px;}
            .h-cat li a {color:#818484;}
            .h-cat li a:hover {border-bottom:1px dashed #555555;}
            .all-products {color:#999;font-size:10px;text-transform:uppercase;}
        /* top product */
            .top-product {width:260px;border-left:1px solid #ddd;padding-left:35px;}
            .show-top {position:relative;right:-115px;top:10px;padding:2px 7px;background:#FF6363;color:#fff;width:47px;}
            .top-link {width:75%;overflow:hidden;white-space:nowrap;word-wrap:normal;text-overflow:ellipsis;text-align:center;}
            .top-link a {color:#155a63;font-size:12px;}
            .top-product a img {margin-left:40px;height:100px;}

JavaScript

$(document).ready(function(){
    $('#bollars').click(function(eventObject)
    {eventObject.preventDefault();$(".h-cat:first-child").hide(500);$('#out-hcat').delay(500).show(500).load("cat-menu-page.html #bollars");});
    $('#knauf').click(function(eventObject)
    {eventObject.preventDefault();$(".h-cat:first-child").hide(500);$('#out-hcat').delay(500).show(500).load("cat-menu-page.html #knauf");});
    $('#volma').click(function(eventObject)
    {eventObject.preventDefault();$(".h-cat:first-child").hide(500);$('#out-hcat').delay(500).show(500).load("cat-menu-page.html #volma");});
    $('#plitonit').click(function(eventObject)
    {eventObject.preventDefault();$(".h-cat:first-child").hide(500);$('#out-hcat').delay(500).show(500).load("cat-menu-page.html #plitonit");});
    $('#kamennycvetok').click(function(eventObject)
    {eventObject.preventDefault();$(".h-cat:first-child").hide(500);$('#out-hcat').delay(500).show(500).load("cat-menu-page.html #kamennycvetok");});
    $('#refrekta').click(function(eventObject)
    {eventObject.preventDefault();$(".h-cat:first-child").hide(500);$('#out-hcat').delay(500).show(500).load("cat-menu-page.html #refrekta");});
    $('#ceresit').click(function(eventObject)
    {eventObject.preventDefault();$(".h-cat:first-child").hide(500);$('#out-hcat').delay(500).show(500).load("cat-menu-page.html #ceresit");});
    $('#axton').click(function(eventObject)
    {eventObject.preventDefault();$(".h-cat:first-child").hide(500);$('#out-hcat').delay(500).show(500).load("cat-menu-page.html #axton");});
    $('#weber').click(function(eventObject)
    {eventObject.preventDefault();$(".h-cat:first-child").hide(500);$('#out-hcat').delay(500).show(500).load("cat-menu-page.html #weber");});
});