JSFiddle - React, Tailwind, and code Playground

by HA3IK

HTML

<table id="wrap">
        <tr>
            <td class="header">Header</td>
        </tr>
        <tr>
            <td class="base" align="center">
                <table class="main">
                    <tr>
                        <td class="left">
                        </td>
                        <td class="content">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, repellendus, dolorem, dolores, omnis magnam rerum modi culpa in alias incidunt deserunt beatae dolore quis quod laborum nisi nulla. Nobis, sunt, ducimus quia velit molestiae perferendis ipsam tempore quis delectus eaque cumque esse eligendi iste. Eveniet, sequi odit debitis explicabo nihil.</p>
                            <p>Animi, consectetur, mollitia, delectus, aliquid explicabo magni eum ducimus sit minima quas voluptatum distinctio sint rem earum neque iure porro saepe quisquam fuga dolorem nostrum. In, vel, eligendi eaque expedita eum earum quas et itaque asperiores doloremque laudantium libero incidunt quam quisquam voluptatibus magni doloribus quis fugit alias perspiciatis minus.</p>
                            <p>Temporibus, similique, aperiam, inventore, dolorem provident distinctio officia voluptas sunt aut quaerat illum placeat voluptate dolores ipsam praesentium tempore rem blanditiis consequatur nam nobis totam esse accusamus aliquam facere veniam assumenda atque. Nihil, itaque, earum, sequi officiis fuga quibusdam suscipit eligendi ab dolores dolorem quod assumenda iure delectus totam illo!</p>
                            <p>Autem, vero, ipsa, doloribus perspiciatis quibusdam aspernatur necessitatibus obcaecati inventore facilis porro eos quis hic. Dicta, eveniet, nemo, saepe, velit omnis fuga temporibus quis eius eaque ipsum magni porro ab incidunt? In, quidem, suscipit, explicabo libero iste minima natus dolorum modi nihil tenetur consequatur ullam iure nemo labore odit non.</p>
                            <p>Esse, excepturi, quisquam...

CSS

*{ margin: 0; padding: 0; }
        table{ border-collapse: collapse; border: none; } /* убираем рамки у таблиц */
        
        html, body, #wrap{ min-width: 1100px; height: 100%; min-height: 490px; }
        body{ position: relative; }
        #wrap{ width: 100%; background: url("../img/contentBg.png"); font-family: Tahoma, Geneva, sans-serif; }
        .header{ height: 70px; vertical-align: middle; background: red; text-align: center; }
        .base{  vertical-align: top; }
        .main, .content{ height: 100%; }
        .main{ width: 1100px; background: #eaeaea; }
        .content{ width: 1000px; vertical-align: top; }
        .left, .right{ width: 49px; background: yellow; }
        .left{ border-left: 1px solid black; }
        .right{ border-right: 1px solid black; }
        .footer{ height: 80px; background-color: #000; vertical-align: middle; text-align: center; color: #fff; }
        
        #search{ position: absolute; width: 240px; height: 30px; background: green; text-align: right; cursor: default; }
        #review{ position: absolute; width: 230px; height: 150px; background: blue; text-align: right; cursor: default; }

JavaScript

var search = document.getElementById("search"),
                rv = document.getElementById("review");
                
                search.style.position = "fixed";
                rv.style.position = "fixed";
                
            //скроллинг сверху
            function scrollingTop(){
                var top = window.pageYOffset ? window.pageYOffset : 
                      document.documentElement.scrollTop ? document.documentElement.scrollTop : 
                      document.body.scrollTop;
                return top;
            }
            //скроллинг слева
            function scrollingLeft(){
                var left = window.pageXOffset ? window.pageXOffset : 
                       document.documentElement.scrollLeft ? document.documentElement.scrollLeft : 
                       document.body.scrollLeft;
                return left;
            }

        /** START инструкция открыть/скрыть блок поиска */
            function openSearch(arg){
                var arg = arg || 0,
                    sLeft = parseInt(search.style.left);
                
                if(arg !== 0){
                    if(arg === 1){
                        search.style.left = 0+"px";
                    }else{
                        search.style.left = (-202)+"px";
                    }
                }else{
                    if(sLeft !== 0){
                        search.style.left = 0+"px";
                    }else{
                        search.style.left = (-202)+"px";
                    }
                }
            }
            
            search.onclick = function(){
                openSearch();
            }
            search.onmouseover = function(){
                openSearch(1);
            }
            search.onmouseout = function(){
                openSearch(2);
            }
        /** END инструкция открыть/скрыть блок поиска */
        /** START инструкция открыть/скрыть блок отзыва */
            function...